防抖与节流的理解与介绍

场景：

假设用户非常频繁地触发某个事件，而这个事件又是与服务器进行交互的，那么此时会导致用户过于频繁地发送请求，显然这在某些情况下是不合适的，为了在此场景下进行限制频繁的请求，那么就需要使用到防抖与节流。

防抖

        例子：假设设置了一个滚动条的监听函数，滚动条每发生滚动，就向服务器发送 “用户滚动了”，显然，这种事件会非常频繁地被触发，但是服务器其实只需要隔一段事件看看用户是否滚动了即可，无需如此频繁，此时就需要进行限制，假定让用户每隔一秒才向服务器告诉自己的滚动条位置，这样就能减少很多的网络交互。

        防抖的作用：让用户触发的回调每隔一段时间只触发一次，例如设置了一秒触发一次，那么就每隔一秒才把用户最近触发的回调执行，而前面的触发行为就不予理会。

        防抖的使用方法（debounced（防抖动）函数）：

        lodash.debounce | Lodash 中文文档 | Lodash 中文网

// 表示调用calculateLayout回调时，每150ms才执行一次
_.debounce(calculateLayout, 150))

        手写实现

// 防抖
function debounce(fn, delay) {
    let time = null
    return function (e) {
        clearTimeout(time)
        time = setTimeout(()=>{
            fn.apply(this, arguments)
        }, delay)
    }
}

节流

        类似的，节流的做法是在规定的时间内，只执行第一次的回调函数（防抖是执行最后一次的回调函数），同样也能阻止止频繁网络交互的行为。

        节流的使用方法：

// 每100ms只执行第一次触发updatePosition时的行为
_.throttle(updatePosition, 100))

手写实现

// 节流
function throttle(fn, delay) {
    let flag = true
    return function (e) {
        if (!flag) return
        flag = false
        setTimeout(() => {
            fn.apply(this,arguments)
            flag = true
        }, delay);
    }
}