• 什么是防抖和节流?手写一个防抖函数和节流函数?


    1.防抖(debounce)

      当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

      当你频繁触发后,n秒内只执行一次。

    function test() {
         console.log('防抖')
    }
    window.addEventListener(
    'mousemove', debounce(test, 1000)); function debounce(func, wait) {//核心代码 var timer, wait = +wait || 0; return function () { var context = this var args = arguments timer ? clearTimeout(timer) : func.apply(context, args); timer = setTimeout(function () { func.apply(context, args) }, wait); } }

    2.节流(throttle)

      当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

      在固定的时间内触发事件,每隔n秒触发一次

    function throttle(func, wait) {//核心代码
        var timer,
        wait = +wait || 0;
        return function () {
            var context = this;
            var args = arguments;
            if (!timer) {
                func.apply(context, args)
                timer = setTimeout(function () {
                    timer = null;
                }, wait)
            }
        }
    }

     应用场景:

    搜索框搜索时,用户在不断输入值时,用防抖来节约请求资源。
    频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器
    登录按钮或者其他什么按钮,用户鼠标不断点击触发,mousedown(单位时间内只触发一次)
    window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次

  • 相关阅读:
    redhat 7.6 常用命令
    redhat 7.6 VI编辑操作
    redhat 7.6 网络配置
    华为学习配置笔记-01 配置con密码
    redhat 7.6 ssh 服务配置
    web前端面试第一次[addEventListenr();绑定事件]
    redis集群搭建
    linux服务器重启后redis数据丢失问题
    redis日志文件路径的设置
    linux下redis安装使用
  • 原文地址:https://www.cnblogs.com/cqweb/p/14152030.html
Copyright © 2020-2023  润新知