JS简单实现防抖和节流

MRZYD 发布于2019-08-23 10:37 / 1272人阅读

摘要：定时器实现当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行直到秒后，定时器执行执行函数，清空定时器，这样就可以设置下个定时器。当最后一次停止触发后，由于定时器的延迟，可能还会执行一次函数。

一、什么是防抖和节流

Ps: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。

1. 防抖 - debounce

其中一种解决方案就是每次用户停止输入后，延迟超过500ms时，才去搜索此时的String，这就是防抖。

原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。

代码实现：

function debounce(fn, delay) {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;

  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    // 清理掉正在执行的函数，并重新执行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 记录当前函数调用次数
// 当用户滚动时被调用的函数
function foo() {
  flag++;
  console.log("Number of calls: %d", flag);
}

// 在 debounce 中包装我们的函数，过 2 秒触发一次
document.body.addEventListener("scroll", debounce(foo, 2000));

debounce函数封装后，返回内部函数

每一次事件被触发，都会清除当前的timer然后重新设置超时并调用。这会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发

只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行

2. 节流 - throttle

另一种解决方案比防抖要宽松些，这时我们不想用户一味的输入，而是给用户一些搜索提示，所以在当中限制每过500ms就查询一次此时的String，这就是节流。

原理：节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

代码实现有两种，一种是时间戳，另一种是定时器
1）时间戳实现：

function throttle(func, delay){
  let prev = Date.now();
  return function(){
    const context = this;
    const args    = arguments;
    const now     = Date.now();
    if(now - prev >= delay){
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

当高频事件触发时，第一次应该会立即执行（给事件绑定函数与真正触发事件的间隔如果大于delay的话），而后再怎么频繁触发事件，也都是会每delay秒才执行一次。而当最后一次事件触发完毕后，事件也不会再被执行了。

2）定时器实现：
当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行；直到delay秒后，定时器执行执行函数，清空定时器，这样就可以设置下个定时器。

fucntion throttle(func, delay){
  let timer = null;

  return funtion(){
    let context = this;
    let args    = arguments;
    if(!timer){
      timer = setTimeout(function(){
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

当第一次触发事件时，肯定不会立即执行函数，而是在delay秒后才执行。
之后连续不断触发事件，也会每delay秒执行一次。
当最后一次停止触发后，由于定时器的delay延迟，可能还会执行一次函数。

3）综合使用时间戳与定时器，完成一个事件触发时立即执行，触发完毕还能执行一次的节流函数

function throttle(func, delay){
  let timer = null;
  let startTime = Date.now();

  return function(){
    let curTime = Date.now();
    let remaining = delay - (curTime - startTime);
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    if(remaining <= 0){
      func.apply(context,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(func, remaining);
    }
  }
}

需要在每个delay时间中一定会执行一次函数，因此在节流函数内部使用开始时间、当前时间与delay来计算remaining，当remaining <= 0时表示该执行函数了，如果还没到时间的话就设定在remaining时间后再触发。当然在remaining这段时间中如果又一次发生事件，那么会取消当前的计时器，并重新计算一个remaining来判断当前状态。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96518.html

详谈js防抖和节流

摘要：本文会分别介绍什么是防抖和节流，它们的应用场景，和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。本文由小芭乐发表 0. 引入首先举一个例子：模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：没有防抖 ...

shevy 2019-08-23 13:54 评论0 收藏0
彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
函数防抖和节流

摘要：应用场景给按钮加函数防抖防止表单多次提交。对于输入框连续输入进行验证时，用函数防抖能有效减少请求次数。参考十分钟学会防抖和节流轻松理解函数节流和函数防抖函数防抖和节流防抖对于触发非常频繁又没有必要每次都执行的事件，希望合并到一次去执行；实现思路：事件触发后，在规定的时间范围内如果事件重复触发，那么忽略之前触发的事件，并且重新开始计时，直到某一次事件触发后大于规定时间，我们才执...

daydream 2019-08-23 16:50 评论0 收藏0
浅谈js防抖和节流

摘要：防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。（信我，你看完肯定就懂了）从滚动条监听的例子说起先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。showImg(ht...

opengps 2019-08-26 13:32 评论0 收藏0
JavaScript防抖和节流

摘要：概念函数防抖和函数节流，两者都是优化高频率执行代码的一种手段。防抖任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流指定时间间隔内只会执行一次任务一定时间内方法只跑一次。概念函数防抖和函数节流，两者都是优化高频率执行js代码的一种手段。防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流：指定时间间隔内只会执行一次任...

DevWiki 2019-08-23 17:09 评论0 收藏0