防抖（debounce）和节流（throttle）的学习总结

caspar 发布于2019-08-23 15:58 / 1029人阅读

摘要：节流原理为事件触发时调用的函数添加时间阈值，只有在超过时间阈值时触发事件，回调函数才会被调用。

防抖（debounce）

用户与网页进行交互时，经常出现根据页面的状态、数据向服务器请求、发送数据的场景，比如：根据用户的输入数据进行实时校验，下拉请求数据等等，如果用户操作过于频繁，页面状态、数据变化的太快太频繁，会进行多次请求，这其中的很多请求都是没有意义的，实时校验，只需要校验用户最后的输入，下拉请求只需要在用户下拉的最后一次进行请求。这就需要防抖来实现了。
防抖的原理：为事件触发时调用的函数添加延迟，如果在延迟内频繁触发，上一次的事件触发会被取消，延迟将会重新计算，这样一来用户的最会一次触发，函数才会真正被调用。

//fn为回调函数，delay是人为设置的延迟
function debounce(fn, delay){
    var timeout; //定时器编号
    return function(){
        //context是回调函数运行的环境， 
        //args是回调函数的参数，一般是addEventListener传进来的event变量
        var context = this, args = arguments;
        clearTimeout(timeout);//当用户频繁触发事件时，定时器被清除
        timeout = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    }
}
//调用方式
var validate = debounce(function(){
    //do somthing
}, 200);
document.querySelector("input").addEventListener("input", validate);

节流（throttle）

节流，顾名思义就是把管道的阀门稍稍关紧一点，让水流动的少一点。在javascript中，很多事件是连续触发的，比如：resize，mousemove。我们不希望事件频繁触发，如果采用防抖方案，事件只在延迟时间内触发最后一次，这显然是不合理的，我们只需要让其触发的频率低一些，这就需要节流来实现。
节流原理：为事件触发时调用的函数添加时间阈值，只有在超过时间阈值时触发事件，回调函数才会被调用。

//fn为回调函数，threshhold是时间阈值
function throttle(fn, threshhold){
    var start = new Date(), timeout;
    var threshhold = threshhold || 160;
    return function(){
        //context是回调函数运行的环境， 
        //args是回调函数的参数，一般是addEventListener传进来的event变量
        var context = this, args = arguments, cur = new Date();
        clearTimeout(timeout);
        //通过连续两次触发的时间间隔，决定是否调用回调函数
        if(cur - start >= threshhold){
            fn.apply(context, args);
            start = cur;
        }else{
            //当连续触发行为结束时，还要进行最后一次函数回调
            timeout = setTimeout(function(){
                fn.apply(context, args)
            }, threshhold);
        }
    }
}
//调用函数
var mousemove = throttle(function(e) {
 //do somthing
});

// 绑定监听
document.querySelector("#panel").addEventListener("mousemove", mousemove);

以下是html页面

最后，大家可以通过这个动画来理解，学习防抖和节流。

云服务器 GPU云服务器 VUE防抖与节流机器学习学习总结机器学习总结 javascript学习总结

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

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

debounce(防抖)和throttle(节流)

摘要：防抖防抖，简单来说就是防止抖动。两者间的核心区别就在于持续触发事件时，前者合并事件并在最后时间去触发事件，而后者则是隔间时间触发一次关键知识点定时器闭包资源在线测试源代码防抖和节流窗口的resize、scroll，输入框内容校验等操作时，如果这些操作处理函数较为复杂或页面频繁重渲染等操作时，如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debo...

2bdenny 2019-08-19 18:46 评论0 收藏0
debounce(防抖)和throttle(节流)

摘要：防抖防抖，简单来说就是防止抖动。两者间的核心区别就在于持续触发事件时，前者合并事件并在最后时间去触发事件，而后者则是隔间时间触发一次关键知识点定时器闭包资源在线测试源代码防抖和节流窗口的resize、scroll，输入框内容校验等操作时，如果这些操作处理函数较为复杂或页面频繁重渲染等操作时，如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debo...

ssshooter 2019-08-01 15:28 评论0 收藏0
防抖与节流（源码学习）

摘要：防抖与节流源码学习最近自己撸了一个轮播图，在点击切换的时候，为了寻求更好的用户体验，引入了节流，在此记录对源码的学习过程源码来源防抖函数防抖使用场景现在我们需要做一个搜索框，当用户输入文字，执行事件的时候，需要发出异步请求去进行结果查询。防抖与节流（源码学习）最近自己撸了一个轮播图，在点击切换的时候，为了寻求更好的用户体验，引入了节流，在此记录对源码的学习过程源码来源：unders...

instein 2019-08-22 17:12 评论0 收藏0
说说JavaScript中函数的防抖 (Debounce) 与节流 (Throttle)

摘要：基础防抖我们现在写一个最基础的防抖处理标记事件也做如下改写现在试一下，我们会发现只有我们停止滚动秒钟的时候，控制台才会打印出一行随机数。为何要防抖和节流有时候会在项目开发中频繁地触发一些事件,如 resize、 scroll、 keyup、 keydown等，或者诸如输入框的实时搜索功能，我们知道如果事件处理函数无限制调用，会大大加重浏览器的工作量，有可能导致页面卡顿影响体验；后台...

yanwei 2019-08-23 18:10 评论0 收藏0
探究防抖(debounce)和节流(throttle)

摘要：如果使用的是防抖，那么得等我们停止滚动之后一段时间才会加载新的内容，没有那种无限滚动的流畅感。这时候，我们就可以使用节流，将事件有效触发的频率降低的同时给用户流畅的浏览体验。调用，浏览器会在下次刷新的时候执行指定回调函数。本文来自我的博客，欢迎大家去GitHub上star我的博客本文从防抖和节流出发，分析它们的特性，并拓展一种特殊的节流方式requestAnimationFrame...

keke 2019-08-23 15:19 评论0 收藏0