延迟操作与函数节流问题

在平时做一些操作时,涉及到多次触发但是却不想立刻调用函数时,就需要对函数进行一个延时触发的操作

    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)

你可能感兴趣的:(延迟操作与函数节流问题)