在平时做一些操作时,涉及到多次触发但是却不想立刻调用函数时,就需要对函数进行一个延时触发的操作
const throttle = function ( fn, interval = 500) {
let timer;
return function (...args) {
// 如果定时器还在,说明前一次延迟执行还没有完成;
if ( timer ) {
clearTimeout(timer)
}
// 延迟一段时间执行 clearTimeout(timer)
timer = setTimeout(() => {
timer = null;
fn(…args)
}, interval )
}
}
补充说明:
这个函数的使用方法,参数 (fn [, interval])
fn 必填,为需要延时处理的函数
interval 选填, 为延迟ms数 ,默认:500
例子:一个input输入的回调,需要在输入后向后端发送请求,属于高频触发的函数,但是请求频率过高会影响页面性能,此时便需要对函数做一个延迟的处理。
//当前有一个需要触发的请求需要绑定到
function handleInputRequest(e){
const params = { value: e.target.value }
fetch(requestUrl,{ body: params, method: 'POST' })
.then((res) => {
if(res&&res.code === 200){
document.getElementById('inputDisplay').innerHtml = res.data
}
})
}
//将需要延迟的函数传入throttle 返回一个已做了300ms延时操作的函数
const delayHandleInputRequest = throttle(handleInputRequest, 300)
//绑定到事件中
$.('input').on('change', delayHandleInputRequest)