[JavaScript知识库]防抖与节流（debounce & throttle）

防抖

• 防抖是指当一个事件被触发时，设定一个延时时间去执行，如果在这个延时时间内又再次触发此事件，则重新开始设定延时时间去执行
  
• 例如：重复点击按钮发送 ajax 请求，可以通过防抖去避免重复发送请求

        let time = null
        btn.onclick = function () {
            clearTimeout(time)

            time = setTimeout(() => {
                console.log('发送请求')
            }, 1000)
        }

节流

• 节流是指设定一个周期，当一个事件触发执行后，在这个周期内再次触发这个事件，则此事件不会执行

• 例如：重复点击按钮发送 ajax 请求，可以通过节流是其发送请求的频率没这么快

        let time = null, flag = true
        btn.onclick = function () {
            if (flag) {
                flag = false
                console.log('发送请求')

                setTimeout(() => {
                    flag = true
                }, 1000)
            }
        }

lodash

• 可以通过引入lodash直接使用防抖和节流

// 防抖，fn(执行函数)
btn.onclick = _.debounce(fn, time)
// 节流
btn.onclick = _.throttle(fn.time)