技术片段 - 防抖与节流

一、防抖

防抖(debounce)

防抖触发高频率事件时n秒后只会执行一次,如果n秒内再次触发,则会重新计算。

概述:每次触发时都会取消之前的延时调用。

<!-- HTML 部分 -->
<input type="text" id="input">

// JS 部分
// 防抖函数
function bounce(delay, cb) {
    var timer
    return function (value) {
        clearTimeout(timer)
        timer = setTimeout(function(){
            cb(value)
        }, delay)
    }
}
function fn(value) {
    console.log(value)
}
var inputItem = document.getElementById('input')
var bounceFun = bounce(1000, fn)
inputItem.addEventListener('keyup', function(e){
    bounceFun(e.target.value)
})

二、节流

节流(throttle)

高频事件触发，每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法。

<!-- HTML 部分 -->
<button id="button">点击我</button>
<p>随机数：<span id="js-random"></span></p>

// JS 部分
// 节流
function throttling(func, wait) {
    var timer
    return function() {
        if (!timer) {
            timer = setTimeout(function(){
                func()
                timer = null
            }, wait)
        }
    }
}
function handle() {
    document.getElementById('js-random').innerHTML = Math.random()
}
document.getElementById('button').onclick = throttling(handle, 1000)

防抖与节流的区别

函数防抖是在「一定时间」内连续触发的事件，只在「最后执行一次」。如果事件在「不超过设定时间」内一直触发，则事件会一直不执行。

函数节流是「一段时间内」只执行一次。就是设置「1秒」时间时，不管触发事件1次还是100次，它都最终有且只会执行一次。