JS进阶篇2---函数防抖（debounce）

zhongmeizhi 发布于2019-08-23 18:19 / 2341人阅读

摘要：函数防抖的要点，是需要一个来辅助实现，延迟运行需要执行的代码。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。而非立即执行版指的是触发事件后函数会立即执行，然后秒内不触发事件才能继续执行函数的效果。。

JS中的函数防抖 一、什么是函数防抖

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

举个栗子，坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待 10 秒。在上述例子中，电梯在检测到有人进入 10 秒钟之后，才会关闭电梯门开始运行，因此，“函数防抖”的关键在于，在 一个事件 发生 一定时间 之后，才执行 特定动作。

二、为什么需要函数防抖

　　前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

除此之外，短时间内重复的 ajax 调用不仅会造成数据关系的混乱，还会造成网络拥塞，增加服务器压力，显然这个问题也是需要解决的。

三、函数防抖如何解决上述问题

根据上面对问题的分析，细细思索，可以想到如下解决方案。

函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。

四、函数防抖的代码实现

根据以上分析，我们对 “函数防抖” 来进行简单的代码实现，如下：

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

以上代码本人亲测有效，小伙伴们可放心食用（注意，函数触发方式为 “resize”，改变窗口大小，观察浏览器控制台的变化）。

五、函数节流的使用场景

函数防抖一般用在什么情况之下呢？一般用在，连续的事件只需触发一次回调的场合。具体有：

搜索框搜索输入。只需用户最后一次输入完，再发送请求；

用户名、手机号、邮箱输入验证；

浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染。

目前遇到过的用处就是这些，理解了原理与实现思路，小伙伴可以把它运用在任何需要的场合，提高代码质量。

总结

函数防抖其实是分为 “立即执行版” 和 “非立即执行版” 的，根据字面意思就可以发现他们的差别，所谓立即执行版就是 触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 而 “非立即执行版” 指的是 触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。。

在开发过程中，我们需要根据不同的场景来决定我们需要使用哪一个版本的防抖函数，一般来讲上述的防抖函数都能满足大部分的场景需求。但我们也可以将非立即执行版和立即执行版的防抖函数结合起来，实现最终的双剑合璧版本的防抖函数，以下为小伙伴们做了简单的实现：

/**
 * @desc  函数防抖---“立即执行版本” 和 “非立即执行版本” 的组合版本
 * @param  func 需要执行的函数
 * @param  wait 延迟执行时间（毫秒）
 * @param  immediate---true 表立即执行，false 表非立即执行
 **/
function debounce(func,wait,immediate) {
    let timer;

    return function () {
        let context = this;
        let args = arguments;

        if (timer) clearTimeout(timer);
        if (immediate) {
            var callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timer = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

function handle(){
    console.log(Math.random());
}

// window.addEventListener("mousemove",debounce(handle,1000,true)); // 调用立即执行版本
window.addEventListener("mousemove",debounce(handle,1000,false)); // 调用非立即执行版本

此文所涉及到的代码和知识点都进行了仔细的调研、推敲，代码可以直接使用，若有疑问或者需要改正的地方，欢迎在下方评论区留言，本人将及时解答或者改正。

云服务器 GPU云服务器进阶篇 webrtc进阶信令篇 webrtc进阶-信令篇第2篇

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

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

JS进阶篇3---函数“节流” VS “防抖”

摘要：目的都是为了降低回调函数执行频率，节省计算机资源，优化性能，提升用户体验。函数防抖事件频繁触发的情况下，只有经过足够的空闲时间，才执行代码一次。函数节流和函数防抖的对比分析一、前言前端开发中，函数节流（throttle）和函数防抖（debounce）作为常用的性能优化方法，两者都是用于优化高频率执行 js 代码的手段，那具体它们有什么异同点呢？有对这两个概念不太了解的小伙伴...

hlcc 2019-08-23 18:21 评论0 收藏0
JavaScript专题系列文章

摘要：专题系列共计篇，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究专题之函数组合专题系列第十六篇，讲解函数组合，并且使用柯里化和函数组合实现模式需求我们需要写一个函数，输入，返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 ext...

Maxiye 2019-08-21 17:57 评论0 收藏0
[译]通过实例讲解Debouncing和Throtting(防抖与节流)

摘要：译通过实例讲解和防抖与节流源码中推荐的文章，为了学习英语，翻译了一下原文链接作者本文来自一位伦敦前端工程师的技术投稿。首次或立即你可能发现防抖事件在等待触发事件执行，直到事件都结束后它才执行。 [译]通过实例讲解Debouncing和Throtting(防抖与节流) lodash源码中推荐的文章，为了学习（英语），翻译了一下~ 原文链接作者：DAVID CORBACHO 本文来自一位...

Jenny_Tong 2019-08-23 13:42 评论0 收藏0
JavaScript专题之跟着underscore学防抖

摘要：专题系列预计写二十篇左右，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究和的实现方式。如果有错误或者不严谨的地方，请务必给予指正，十分感谢。 JavaScript 专题系列第一篇，讲解防抖，带你从零实现一个 underscore 的 debounce 函数前言在前端开发中会遇到一些频繁的事件触发，比如： window 的 r...

sutaking 2019-08-20 16:59 评论0 收藏0
Javascript 面试中经常被问到的三个问题！

摘要：相反，在讨论时，面试中通常会提到三件事。通过对事件对应的回调函数进行包裹以自由变量的形式缓存时间信息，最后用来控制事件的触发频率。而认为最后一个参赛者说了算，只要还能吃的，就重新设定新的定时器。 showImg(https://segmentfault.com/img/bVboH5x?w=1000&h=750); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！本...

PrototypeZ 2019-08-23 15:34 评论0 收藏0