函数节流(throttle)和函数去斗(debounce)

约定不等于承诺〃 2022-05-23 02:52 173阅读 0赞

一.函数节流和函数去斗是解决什么问题的：

大家都知道，人的眼睛能感知的最快反应速度是在0.1秒到0.4秒之间，所以0.1秒内的变化从视觉上来说是无意义的。而且如果涉及dom操作，或者网络操作会严重浪费资源，可能导致浏览器崩溃，或者服务器崩溃。例如一下场景：

（1）浏览器滚动事件scroll

(2)  鼠标的点击事件 mouseup, mousedown,mousemove

(3)  键盘的keyup, keydown， input事件

（4）window的resize事件

以上四个场景中，事件都是连续触发的，如果也连续执行相应的回调函数，不但浪费资源，而且没有意义，还有可能导致浏览器或者服务器崩溃。  函数节流和函数去斗就是为了解决类似这样问题的。

二.思想及简单实现:

函数节流：

设定一个时间周期，周期性的执行一个函数；

var _throttle = function (wait, fn) {
            var pre = 0, result;
           
            return function(){
                var now = (new Date()).getTime();
                if(now-pre > wait) {
                    result = fn.apply();
                    pre = now;
                    return result;
                }
            }
     };
    
     // 用setInterval模拟每10毫秒执行一次，但真正的执行时间是10秒
     var throttle = _throttle(10000, function(){
             console.log("*******************")
     });
     setInterval(throttle, 10);

函数去斗：

设定一个延迟时间，延迟时间到了再去执行函数，如果在延迟时间内重复调用则重新计算延迟时间

var _debounce = function(wait, fn){
             var timer = null;
             return function(){
                 if(timer){
                     clearTimeout(timer);
                     timer = null;
                 }
                 timer = setTimeout(function(){
                     var result = fn.apply();
                     clearTimeout(timer);
                     timer = null;
                     return result;
                 }, wait)
             }
         };
    
         // 用setTimeout模拟1秒中调用一次，每次调用都会重置时间。函数真正执行时间是在 8秒后
         var debounce = _debounce(3000, function(){
             console.log('*******************')
         });
    
         setTimeout(debounce,1000);
         setTimeout(debounce,2000);
         setTimeout(debounce,3000);
         setTimeout(debounce,4000);
         setTimeout(debounce,5000);

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关函数防抖（debounce）和节流（throttle）

前言：在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么

小咪咪/ 2022年12月07日 15:27/ 0 赞/ 142 阅读

相关防抖(debouncing)函数与节流(throttling)函数

> JS中的防抖(debouncing)与节流(throttling)是用来控制一个函数在一定时间内执行的次数(频次)，他俩个用处相近、但又不完全相同。注：文章中的示例可

怼烎@/ 2022年10月01日 09:55/ 0 赞/ 181 阅读

相关前端---防抖(Debounce) + 节流(Throttle)

防抖节流应用场景 > 监听某个事件，进行网络请求时，该事件频繁的触发，导致网络请求被高频度的进行。严重影响性能，还可能会造成Bug。例如，在监听输入框的 @

落日映苍穹つ/ 2022年08月31日 11:24/ 0 赞/ 165 阅读

相关 Debounce&&Throttle

防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。实际上对于window的resize事件，实际需求大多

布满荆棘的人生/ 2022年06月02日 06:45/ 0 赞/ 95 阅读

相关 JavaScript 函数节流（throttle）的实现

函数节流是什么对于持续触发的事件，规定一个间隔时间（n秒），每隔一段只能执行一次。上一篇讲的[函数防抖（debounce）][debounce]与本篇说的函数节流（

深碍√TFBOYSˉ_/ 2022年05月28日 13:27/ 0 赞/ 174 阅读

相关函数节流(throttle)和函数去斗(debounce)

一.函数节流和函数去斗是解决什么问题的：大家都知道，人的眼睛能感知的最快反应速度是在0.1秒到0.4秒之间，所以0.1秒内的变化从视觉上来说是无意义的。而且如果涉及dom操

约定不等于承诺〃/ 2022年05月23日 02:52/ 0 赞/ 174 阅读

相关函数防抖debounce与节流throttle

//防抖 function debounce(fn,delay){ let timer = null return (...ar

比眉伴天荒/ 2022年04月27日 17:04/ 0 赞/ 177 阅读

相关探究防抖(debounce)和节流(throttle)

本文来自[我的博客][Link 1]，欢迎大家去GitHub上star我的博客本文从防抖和节流出发，分析它们的特性，并拓展一种特殊的节流方式requestAnimation

你的名字/ 2022年03月07日 02:20/ 0 赞/ 249 阅读

相关探究防抖(debounce)和节流(throttle)

本文来自[我的博客][Link 1]，欢迎大家去GitHub上star我的博客本文从防抖和节流出发，分析它们的特性，并拓展一种特殊的节流方式requestAnimation

迈不过友情╰/ 2022年03月07日 02:18/ 0 赞/ 215 阅读

相关 js去抖（Debouncing）和节流（Throttling）

在开发过程中会遇到频率很高的事件或者连续的事件，如果不进行性能的优化，就可能会出现页面卡顿的现象，比如： 1. 鼠标事件：mousemove(拖曳)/mouseover(划

一时失言乱红尘/ 2021年06月24日 16:09/ 0 赞/ 376 阅读