JavaScript：函数防抖与函数节流

elina 发布于2019-08-23 15:26 / 1680人阅读

摘要：函数防抖简单实现模拟请求获取函数的作用域和变量清除定时器节流名词解释连续执行函数，每隔一定时间执行函数。效果函数防抖是某一段时间内只执行一次函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

防抖（debounce）

名词解释：在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

使用场景：以百度输入框例，比如你要查询XXx，想实现输完了XXx之后，再进行搜索请求，这样可以有效减少请求次数，节约请求资源。

函数防抖简单实现

节流（throttle）

名词解释：连续执行函数，每隔一定时间执行函数。规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

使用场景：鼠标连续多次click事件，mousemove 事件，监听滚动事件，比如是否滑到底部自动加载更多等等...

函数节流简单实现

function throttle(fn, delay) {
    let lastTime; 
    let timer; 
    delay || (delay = 300); // 默认间隔为300ms
    return function(arguments) {
        let context = this;
        let args = arguments;
        let nowTime = +new Date(); // 获取系统当前的时间
        if (lastTime && nowTime < lastTime+ delay) { // 当前距离上次执行的时间小于设置的时间间隔
            clearTimeout(timer); // 清除定时器
            timer = setTimeout(function() { // delay时间后，执行函数
                lastTime= nowTime ;
                fn.apply(context, args);
            }, delay);
        } else { // 当前距离上次执行的时间大于等于设置的时间，直接执行函数
            lastTime= nowTime ;
            fn.apply(context, args);
        }
    };
}

区别:

可以用日常进入电梯来举例，形象地描述节流和防抖的区别

函数防抖：如果A在10：00:00开门走入电梯内（触发事件），如果后续没有人进入电梯，电梯将在5秒钟之后10：00:05关门（执行事件监听器）。这时如果B在10：00:04走入电梯内，电梯会在10：00:09才关门。

函数节流：如果A在10：00:00开门走入电梯内（触发事件），如果后续没有人进入电梯，电梯将在5秒钟之后10：00:05关门（执行事件监听器）。这时如果B在10：00:04走入电梯内，电梯同样是在10：00:05关门。这个时间从第一个人进入电梯开始计时，不管在5秒之内进来多少人，电梯都会在10：00:05关门。如果一直没有人进来，则电梯不运行。

总结:

根据实际业务场景，合理的利用debounce（防抖）和throttle（节流）可以优化性能和提高用户体验。

效果：
函数防抖是某一段时间内只执行一次；
函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

原理：
防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 重新计时。这样一来，只有最后一次操作事件才被真正触发。
节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

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

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

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

高级函数技巧-函数防抖与节流

摘要：封装方法也比较简单，书中对此问题也进行了处理使用定时器，让函数延迟秒后执行，在此秒内，然后函数再次被调用，则删除上次的定时器，取消上次调用的队列任务，重新设置定时器。在实际开发中，函数一定是最实用最频繁的一部分，无论是以函数为核心的函数式编程，还是更多人选择的面向对象式的编程，都会有函数的身影，所以对函数进行深入的研究是非常有必要的。函数节流比较直白的说，函数节流就是强制规定一...

whinc 2019-08-22 11:21 评论0 收藏0
The debounce & throttle in Javascript（防抖与节流）

摘要：您的支持是我最大的动力，我会保证提供高质与清晰的文章与您共同成长。一些文章中的与上面所谈到的设置类似。防抖防抖技术允许我们捆绑多个连续调用成为单一的一次调用。防抖的应用这个简单的举个欢迎star和watch我的github issue blog，欢迎加入讨论。您的支持是我最大的动力，我会保证提供高质与清晰的文章与您共同成长。节流[throttle]与防抖[debounce]在前...

XboxYan 2019-08-23 12:46 评论0 收藏0
前端进击的巨人（八）：浅谈函数防抖与节流

摘要：隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内，函数被频繁调用执行，通过时间频率控制，减少回调函数执行次数，来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题，或许早已是烂大街的解读文章。不过春招系列面试下来，不少伙伴们还...

_Zhao 2019-08-23 15:37 评论0 收藏0
前端笔记(二) 对象的深浅拷贝，函数的防抖与节流，函数柯里化，图片的预加载与懒加载

摘要：对象是无法通过这种方式深拷贝。这就是函数防抖和节流要做的事情。函数防抖当触发频率过高时函数基本停止执行而函数节流则是按照一定的频率执行事件。对象的深浅拷贝对象的深拷贝与浅拷贝的区别：浅拷贝：仅仅复制对象的引用, 而不是对象本身。深拷贝：把复制的对象所引用的全部对象都复制一遍浅拷贝的实现： var obj = { age : 18, person : { ...

dongxiawu 2019-08-26 11:43 评论0 收藏0
函数防抖与节流

摘要：函数防抖就是让某个函数在上一次执行后，满足等待某个时间内不再触发此函数后再执行，而在这个等待时间内再次触发此函数，等待时间会重新计算。 underscore.js提供了很多很有用的函数，今天想说说其中的两个。这两个函数都用于限制函数的执行。 debounce 在解释这个函数前，我们先从一个例子看下这个函数的使用场景。假设我们网站有个搜索框，用户输入文本我们会自动联想匹配出一些结果供...

Mr_zhang 2019-08-21 10:31 评论0 收藏0