函数的防抖和节流

昨天坐公交，人刚上完，死机一jio油门，我就摔了跤，我很生气。这件事让我回想起了上次看到的关于防抖的文章，如今本身再来讲一遍，也算是加深认识吧。

防抖

什么是防抖，举个司机踩油门的栗子就是，每次有有乘客上来死机要等10秒让乘客坐稳了才能开车，有新的乘客上来又要从新计算十秒，直到最后一个乘客上来为止。拿个程序员常见的例子就是搜索框，每次输入暂停了超过必定时间才会去向服务器发送搜索请求。

function debounce(fn, time) {
    let Timer;
    return () => {
        Timer && clearTimeout(Timer)
        Timer = setTimeout(() => {
            fn.call(this, arguments)
        }, time)
    }
}
复制代码

应用：

function debounce(fn, time) {
    let Timer;
    return () => {
        Timer && clearTimeout(Timer)
        Timer = setTimeout(() => {
            fn.apply(this, arguments)
        }, time)
    }
}

let input = document.querySelector('#input')

input.addEventListener('keyup', debounce(() => {
    console.log(input.value)
},500))
复制代码

节流

顾名思义就是指一段时间内只会执行一次事件，也就是没两次事件执行的间隔大于等于所给定的时间。例如使用鼠标疯狂点击的时候，须要限制点击事件的触发频率。

function throttle(fn, time) {
    let startTime = new Date()
    return () => {
        let now = new Date()
        if(now - startTime >= time){
            fn.apply(this, arguments)
            startTime = new Date()
        }
    }
}
复制代码

应用：

function throttle(fn, time) {
    let startTime = new Date()
    return () => {
        let now = new Date()
        if(now - startTime >= time){
            fn.apply(this, arguments)
            startTime = new Date()
        }
    }
}

let button = document.querySelector('#button')

button.addEventListener('click', throttle(() => {
    console.log(new Date())
}, 1000))
复制代码

参考