函数防抖和节流

daydream 发布于2019-08-23 16:50 / 543人阅读

摘要：应用场景给按钮加函数防抖防止表单多次提交。对于输入框连续输入进行验证时，用函数防抖能有效减少请求次数。参考十分钟学会防抖和节流轻松理解函数节流和函数防抖

函数防抖和节流 防抖

对于触发非常频繁又没有必要每次都执行的事件，希望合并到一次去执行；

实现思路：

事件触发后，在规定的时间范围内如果事件重复触发，那么忽略之前触发的事件，并且重新开始计时，直到某一次事件触发后大于规定时间，我们才执行需要执行的代码段（函数）；

看起来就像是只执行了用户快速操作的最后一次事件；

代码实现：

var debounce = function(fn, delayTime) {
 var timeId;
 return function() {    
    var context = this, args = arguments;
       timeId && clearTimeout(timeout);
       timeId = setTimeout(function{
          fn.apply(context, args);
    }, delayTime)
  }
}

简单分析：

利用闭包保存一个setTimeout的id，如果在delayTime内闭包中的函数再次执行，会立刻clear掉上一次的延时回调，生成一个新的延时回调；如果超过delayTime没有再次执行闭包中的函数，那延时回调就会被执行，这样才算是真正执行了需要执行的事件。

应用场景：

给按钮加函数防抖防止表单多次提交。

对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。

判断scroll是否滑到底部，滚动事件+函数防抖

节流

对于触发非常频繁的事件，在规定时间间隔后才能执行，在规定时间间隔内触发的事件会被忽略，但是不会重新开始计时；

实现思路：

规定一个时间，一次触发后，在规定时间内触发的事件都忽略，超过规定时间后可以重新执行触发的事件；

代码实现：（两种）

时间戳

var throttle = (fn, delayTime) => {
    var _start = Date.now();
    return function() {
        var _now = Date.now(), context = this, args = arguments;
        if(_now - _start >= delayTime) {
              fn.apply(context, args);
               _start = Date.now();
        }
      }
}

简单分析：

先设定一个初始时间，然后每次执行闭包内的函数都与当前时间做比较，如果小于delayTime，什么也不做，忽略该次事件，如果大于delayTime，执行回调函数fn，重置初始时间；

定时器

var throttle = function(fn, delayTime) {
      var flag;
      return function() {
        var context = this, args = arguments;
        if(!flag) {
            fn.apply(context, args);
              flag = setTimeout(function() {    
                  flag = false;
            }, delayTime);
          }
      }
}

简单分析：

通过设定一个标志位，通过标志位判断是否可以执行回调函数，在延时函数中执行回调的同时将标志位置为可再次执行，这样就保证了在规定时间之后能再次执行需要的回调函数；

应用场景：

游戏中的刷新率

DOM元素拖拽

Canvas画笔功能

防抖和节流区别

防抖是把之前频繁的事件触发都放到某一次停顿时触发，可以理解为执行最后一次（并不准确）；节流则是执行完一次以后等待一段时间之后才能再次执行，可以理解为第一次；这意味着防抖执行的是最新的，而节流在等待中如果事件有更新是不会执行的，会被忽略，这两者应用场景不同；

防抖适合多次事件一次响应的情况；

节流适合大量事件按时间做平均分配触发。

参考：

十分钟学会防抖和节流

轻松理解JS函数节流和函数防抖

云服务器 GPU云服务器 VUE防抖与节流函数节流 js函数节流防抖

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

转载请注明本文地址：https://www.ucloud.cn/yun/103373.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
JavaScript防抖和节流

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

DevWiki 2019-08-23 17:09 评论0 收藏0
函数的防抖和节流是个啥？？？

摘要：函数防抖和节流，都是控制事件触发频率的方法。封装一个函数，让持续触发的事件监听是我们封装的这个函数，将目标函数作为回调传进去，等待一段时间过后执行目标函数第二点实现了，再看第一点持续触发不执行。曾经面试时候被问到过这个，年少的我一脸无知。。。后来工作中遇到了一个场景：输入名称的同时去服务器校验名称是否重复，但发现之前的代码竟然都没做限制，输入一次发一次请求。简直忍不了，就在项目的u...

edagarli 2019-08-23 18:35 评论0 收藏0
JS简单实现防抖和节流

摘要：定时器实现当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行直到秒后，定时器执行执行函数，清空定时器，这样就可以设置下个定时器。当最后一次停止触发后，由于定时器的延迟，可能还会执行一次函数。一、什么是防抖和节流 Ps: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源...

MRZYD 2019-08-23 10:37 评论0 收藏0