在前端开发中，经常会遇到频繁触发某一事件的情况，如 scroll、mousemove、onchange等。这种高频率的触发会造成卡顿等现象。
解决这种问题通常有两种方法：防抖 和 节流

防抖 debounce

防抖原理：事件触发 n 秒后才执行，如果在一个事件触发的 n 秒内又触发了这个事件，以新的事件的时间为准，n 秒后才执行。总之，就是要触发完事件 n 秒内不再触发事件。

01.png

html

 <input type="text" id="inp" />

基础版本：

function debounce(func, delay) {
    var timer;   //计时器id
    return function () {
        clearTimeout(timer)  //清除计时器
        timer = setTimeout(func, delay);
    }
}
// 调用
inp.oninput = debounce(function(){console.log("test"),1000)

好了，一个基础的防抖函数就完成了。
但这样写有两个问题没有解决：this指向 和 event对象

this

//如果输出this， 指向window
inp.oninput = debounce(function(){console.log(this),1000)

event

function debounce(func, delay) {
    var timer;   //计时器id
    return function () {
        clearTimeout(timer)  //清除计时器
        timer= setTimeout(func, delay);
    }
}
function bing(e) {
    console.log(e)
}
// 调用
inp.oninput = debounce(bing, 1000)
//输出 undefined

完善后的代码

function debounce(func, delay) {
    var timer;   //计时器id
    return function () {
        let _this = this;   //保留this
        let _arg = arguments; //保留event
 
        clearTimeout(timer)  //清除计时器
        timer = setTimeout(function(){
            func.apply(_this,_arg)   //改变指向
        }, delay);
    }
}
function bing(e) {
    console.log(e,this.value)
}
// 调用
inp.oninput = debounce(bing, 1000)

节流 throttle

节流原理 :特定的时间内周期，事件只会执行一次，不管被触发了多少次。
如一些抽奖系统等。

02.png

节流的实现目前有两种主流方式：时间戳 和 定时器

HTML

<span id='show'>0</span>
<button id="ibox">click</button>

script

   //节流
    let show = document.querySelector('#show'),
        ibox = document.querySelector('#ibox')

    function throttle(fn, wait) {//shell函数
        let lastTime = 0
        return function (e) {
            let nowTime = new Date().getTime()
            if (nowTime - lastTime > wait) {
                fn.apply(this, arguments)
                lastTime = nowTime
            }
        }
    }
    function buy(e) {
        show.innerText = parseInt(show.innerText) + 1
    }
    ibox.onclick = throttle(buy, 1000)