美文网首页
实现js防抖

实现js防抖

作者: pumpkin1024 | 来源:发表于2021-03-12 14:09 被阅读0次

    防抖(debounce)

    第一步

    1. 实现一个函数,返回一个函数func
    2. 参数,第一个参数是一个函数,第二个参数是一个数字time
    3. 当频繁调用返回的函数func时,在time毫秒时间内不执行,当最后一次调用后,过time毫秒后执行一次函数
    function debounce(func, timeout) {
      let timer;
      return function () {
        if (timer) {
          // 如果在timeout秒调用 清空定时器
          clearTimeout(timer);
        }
        // 每次调用都指定timeout后再执行
        timer = setTimeout(() => {
          timer = null;
          func();
        }, timeout);
      };
    }
    

    第二步

    1. 函数可以传参数
    2. 在func调用时要使用function ()的上下文this
    function debounce(func, timeout) {
      let timer;
      return function () {
        if (timer) {
          // 如果在timeout秒调用 清空定时器
          clearTimeout(timer);
        }
        // 每次调用都指定timeout后再执行
        timer = setTimeout(() => {
          timer = null;
          func.apply(this, Array.from(arguments));
        }, timeout);
      };
    }
    

    相关文章

      网友评论

          本文标题:实现js防抖

          本文链接:https://www.haomeiwen.com/subject/tnlzqltx.html