首页 > Web开发 > 详细

JS的去抖、节流

时间:2019-03-06 11:24:24      阅读:193      评论:0      收藏:0      [点我收藏+]

去抖(debounce)

  在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

//模拟一段ajax请求
function ajax(content) {
  console.log(‘ajax request ‘ + content)
}

function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}
    
let inputb = document.getElementById(‘debounce‘)

let debounceAjax = debounce(ajax, 500)

inputb.addEventListener(‘keyup‘, function (e) {
    debounceAjax(e.target.value)
})

表现:

技术分享图片

 

节流(throttle)

  规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

function throttle(fun, delay) {
    let last, deferTimer
    return function (args) {
        let that = this
        let _args = arguments
        let now = +new Date()
        if (last && now < last + delay) {
            clearTimeout(deferTimer)
            deferTimer = setTimeout(function () {
                last = now
                fun.apply(that, _args)
            }, delay)
        }else {
            last = now
            fun.apply(that,_args)
        }
    }
}
let throttleAjax = throttle(ajax, 1000)
let inputc = document.getElementById(‘throttle‘)
inputc.addEventListener(‘keyup‘, function(e) {
    throttleAjax(e.target.value)
})

表现:

技术分享图片

 

区别:

  去抖和节流十分相似,核心代码都是clearTimeout,不一样的是,如果短时间内不断触发:
    去抖:停止触发时才去执行

    节流:只要过了delay,就会执行过了delay后的第一次触发

 

JS的去抖、节流

原文:https://www.cnblogs.com/amiezhang/p/10482098.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!