在事件被触发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后的第一次触发
原文:https://www.cnblogs.com/amiezhang/p/10482098.html