Awesome Function: debounce
在线演示
利用闭包保存定时器的debounce函数
// 利用闭包保存定时器的debounce函数
const debounce1 = function () {
let timer = null
return function (fn, wait, scope) {
clearTimeout(timer)
timer = setTimeout(function () {
fn.call(scope)
}, wait)
}
}()
// 按钮触发事件
debounce1(() => {
paras[index - 1].innerHTML += ' 执行的内容'
}, 1000)
利用函数属性保存定时器的debounce函数
// 利用函数属性保存定时器的debounce函数
const debounce2 = function (fn, wait, scope) {
clearTimeout(debounce2.timer)
debounce2.timer = setTimeout(function(){
fn.call(scope)
}, wait)
}
// 按钮触发事件
debounce2(function () {
paras[index - 1].innerHTML += ' 执行的内容'
}, 1000)
可配置是否立即执行的debounce函数
// 可配置是否立即执行的debounce函数
const debounce3 = function () {
let timer = null
return function (fn, wait, scope, immediate) {
timer && clearTimeout(timer)
if (immediate) {
!timer && fn.call(scope)
timer = setTimeout(() => {
timer = null
count = 0
}, wait)
} else {
timer = setTimeout(function () {
fn.call(scope)
timer = null
}, wait)
}
}
}()
// 按钮触发事件，立即执行的内容
debounce3(function () {
paras[index - 1].innerHTML += ' 立即执行的内容'
}, 1000, null, true)
// 按钮触发事件，延迟执行的内容
debounce3(function () {
paras[index - 1].innerHTML += ' 延迟执行的内容'
}, 1000)
