标签：function 触发 防抖 timer js 事件 原理 fn wait

一、在前端中有一些事件会频繁的触发容易造成页面卡顿，例如：

1. window 的 resize、scroll
2. mousedown、mousemove
3. keyup、keydown
4. input 的 input 事件

二、防抖的原理

答：不管触发多少次事件，都会等到事件触发 **n 秒后 **才会执行，如果在事件触发的 n 秒内 又触发了这个事件，那么就以新的事件的时间为准重新计算，总之，就是要等你触发事件 n 秒内 不再触发事件，我才会执行，一般用在用户表单输入实时搜索上

// 第一版
// 缺点：函数的 this 指向了 window，应该指向 container
function debounce1(fn, wait) {
    let timer;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(fn, wait);
    }
}

// 第二版（解决this指向问题）
// 缺点：函数的事件对象 event 变成了 undefined
function debounce2(fn, wait) {
    let timer;
    return function () {
        clearTimeout(timer);
        // console.log(this);  // 这里的 this 是对的
        timer = setTimeout(() => {
            fn.call(this)    //绑定上面的 this
        }, wait);
    }
}


// 第三版（解决 event 事件对象问题）
function debounce(fn, wait) {
    let timer;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments)   // 把参数传进去
        }, wait);
    }
}


// 第四版（立即执行，停止触发 n 秒后，才可以重新触发执行。反过来）
function debounce4(fn, wait, immediate) {
    let timer;
    return function () {
        if (timer) clearTimeout(timer);
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, wait)
            if (callNow) {
                fn.apply(this, arguments)
            }
        } else {
            timer = setTimeout(() => {
                fn.apply(this, arguments)
            }, wait);
        }
    }
}

// 在 vue 中使用（注意：不能使用箭头函数，否则this指向不对）
// move: debounce(function () {
//     console.log(this.title);
// }, 1000)

• 节流：在规定时间内，保证执行一次该函数。
• 防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始 延时。

标签：function,触发,防抖,timer,js,事件,原理,fn,wait
来源： https://blog.csdn.net/wuj1935/article/details/120293012

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。