编程语言
首页 > 编程语言> > JavaScript中的节流和防抖

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)
    }
}

 

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

 

标签:触发,防抖,now,节流,JavaScript,timerid,duration,执行,fn
来源: https://www.cnblogs.com/linjunfu/p/10858948.html