JavaScript中的节流和防抖

节流：在规定时间内，多次触发事件，但是只执行一次

场景：输入框搜索，地图渲染

优化用户体验

/**
 * 节流 规定时间内不管触发多少次只执行一次
 * @param {Function} fn 实际要执行的业务逻辑函数
 * @param {Number} duration 在规定时间段内，业务逻辑函数只能执行一次，单位毫秒
 */
function throttle(fn, duration) {
    let prev = Date.now(), timerid = null
    return function() {
        let now = Date.now()
        let args = arguments
        clearTimeout(timerid) // 一定要提前清除定时器，因为可以 else 分支执行后，设置了一个定时器，如果第二次触发满足 if 条件，则总共会执行两次
        if ((now - prev) >= duration) { // 到了预定时间，执行设定函数
            fn.apply(this, args)
            prev = now
        } else { // 没到预定时机，但是事件被触发了，重新起一个定时器
            timerid = setTimeout(() => { // 这里保证了最少执行一次，否则达不到 if 条件，函数一次都不会执行
                prev = now
                fn.apply(this, args)
            }, duration)
        }
    }
}

防抖：多次触发事件，以最后一次触发时机开始，延迟规定时间执行

场景：浏览器滚动时加载图片，点击提交按钮

优化性能

/**
 * 防抖 不管事件触发多少次，以最后一次触发时机为准，延迟设定时间执行
 * @param {Function} fn  实际要执行的业务逻辑函数
 * @param {Number} duration 在规定时间段后，业务逻辑函数开始执行，单位毫秒
 */
function debounce(fn, duration) {
    let timerid = null
    return function() {
        clearTimeout(timerid) // 每次触发都需要清除定时器，并且重新起一个定时器
        timerid = setTimeout(() => {
            fn.call(this, arguments)
        }, duration)
    }
}

有时候节流和防抖可以交替使用，看业务需求，并不是那么死板

扫描二维码关注公众号，回复： 6298791 查看本文章

JavaScript中的节流和防抖

猜你喜欢