您现在的位置是:首页>学习分享
js防抖与节流的区别及实现 2019-08-11 283

 * 防抖 节流

 * 概念:
 * 函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
 * 函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。
 * 作用:
 * 优化性能,减少内存消耗。对于高频触发事件做防抖和节流处理时非常重要的
 window.addEventListener('scroll'handle())

 function handle() {

    // 复杂计算
    // ....
    console.log('运行结果')

 }

等于只要不断滚动  handle()方法就不断执行 及其消耗性能

添加防抖处理:

function handle() {
    let timer = null
    return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
            // 复杂计算
            // ....
            console.log('运行结果')
        }, 3000)
    }
}

添加节流处理:

function handle() {
    let isCanDo = true
    return function () {
        if (!isCanDoreturn
        isCanDo = false
        timer = setTimeout(() => {
            // 复杂计算
            // ....
            console.log('运行结果')
            isCanDo3 = true
        }, 3000)
    }
}

总结:

防抖:如果规定时间内被多次触发,则前面的执行会被取消,只会保留最后一次执行
节流:如果规定时间内被多次触发,只能待前一次执行完了,才能被继续触发,否则不会执行。


文章评论
小程序端
  • 微信公众号
  • 我的微信

Copyright © www.zhangqingblog.com All Rights Reserved.

备案号:鄂ICP备18005731号-2