函数防抖Debounce和函数节流Throttle

NicolasHe 发布于2019-08-22 15:23 / 3462人阅读

摘要：函数节流函数防抖函数节流和函数防抖函数节流和函数防抖二者很容易被混淆起来。函数防抖函数在特定的时间内不被再调用后执行。一句话概括函数节流是从用户开始输入就开始计时，而函数节流是从用户停止输入开始计时。

函数节流 & 函数防抖

函数节流和函数防抖

函数节流和函数防抖二者很容易被混淆起来。下面贴英文原文，建议认真阅读：
Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called".
Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds".

函数节流：确保函数特定的时间内至多执行一次。
函数防抖：函数在特定的时间内不被再调用后执行。

上面的概念可能还是不够清晰，下面均以“输入框输入文字触发ajax获取数据”为例，分别以防抖和节流的思想来优化，二者的区别：

输入框输入文字如下：1111111111111111111111（停顿3s继续输入）11111111111111111
函数防抖：当用户持续输入1的过程中，并不会发送ajax，当用户停止输入2s后，发送ajax请求，之后到第3s后，用户继续输入1的过程中，依旧不会发送ajax，当用户停止输入2s后，又触发ajax请求。
函数节流：当用户持续输入1的过程中（假设输入1的过程超过2s了），从你开始输入1开始计时，到第2s，发送ajax请求。函数节流与你是否停止输入无关，是一种周期性执行的策略。
一句话概括：函数节流是从用户开始输入就开始计时，而函数节流是从用户停止输入开始计时。

场景分析

函数节流（throttle）

频繁的mousemove/keydown，比如高频的鼠标移动，游戏射击类的

搜索联想（keyup）

进度条（我们可能不需要高频的更新进度）

拖拽的dragover等

高频的点击，抽奖等

无限滚动（用户向下滚动无限滚动页面，要检查滚动位置距底部多远。如果离底部进了，发ajax请求获取更多数据插入页中）

函数防抖（debounce）

scroll/resize事件，浏览器改变大小，有人说是throttle

文本连续输入，ajax验证/关键字搜索

注：throttle和debounce均是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。

使用函数节流是进行前端性能优化的方法之一，例如，懒加载的实现。

实现函数防抖和函数节流

函数防抖

function debounce(func,wait){
    var timeout;
    return function(){
        var context=this;//用来保存this的正确指向
        var args=arguments;//用来保存触发的事件类型，例如keyboard event
        clearTimeout(timeout);//每次都重新开始计时
        timeout=setTimeout(function(){
            func.apply(context,args);
        },wait);
    }
}
a.onkeyup=debounce(getValue,3000);
function getValue(){
    console.log(this.value);//使用debounce调用它时，this就变为window
}

函数节流

function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;
 
    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次触发 func 剩余的时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果没有剩余的时间了或者你改了系统时间
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

GPU云服务器云服务器函数节流 js函数节流 VUE防抖与节流存储过程和函数的区别

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

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

说说JavaScript中函数的防抖 (Debounce) 与节流 (Throttle)

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

yanwei 2019-08-23 18:10 评论0 收藏0
彻底弄懂函数防抖和函数节流

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

Mr_houzi 2019-08-26 13:33 评论0 收藏0
js 防抖节流 JavaScript

摘要：此时需要采用防抖和节流的方式来减少调用频率，同时不影响原来效果。函数防抖当持续触发事件时，一段时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前就触发了事件，延时重新开始。 js 防抖节流 JavaScript 实际工作中，通过监听某些事件，如scroll事件检测滚动位置，根据滚动位置显示返回顶部按钮；如resize事件，对某些自适应页面调整DOM的渲染；如ke...

int64 2019-08-23 14:48 评论0 收藏0
防抖（debounce）和节流（throttle）的学习总结

摘要：节流原理为事件触发时调用的函数添加时间阈值，只有在超过时间阈值时触发事件，回调函数才会被调用。防抖（debounce）用户与网页进行交互时，经常出现根据页面的状态、数据向服务器请求、发送数据的场景，比如：根据用户的输入数据进行实时校验，下拉请求数据等等，如果用户操作过于频繁，页面状态、数据变化的太快太频繁，会进行多次请求，这其中的很多请求都是没有意义的，实时校验，只需要校验用户最后...

caspar 2019-08-23 15:58 评论0 收藏0
防抖（debounce）和节流（throttle）---解决事件频繁触发造成页面卡死

摘要：防抖和节流连续触发触发频率很高的时间，不进行优化，会出现页面卡顿现象。节流防抖是多次触发事件，目标函数只执行一次，不管触发这些事件用了多少时间。防抖（debounce）和节流（throttle）连续触发（触发频率很高）的时间，不进行优化，会出现页面卡顿现象。常见的需要优化的事件：鼠标事件: mousemove（拖拽） mouseover(划过) mouseWheel(滚屏)...

IamDLY 2019-08-02 15:21 评论0 收藏0