美文网首页
延迟操作与函数节流问题

延迟操作与函数节流问题

作者: NIc老叶 | 来源:发表于2018-08-21 16:28 被阅读0次

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

        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)
    

    相关文章

      网友评论

          本文标题:延迟操作与函数节流问题

          本文链接:https://www.haomeiwen.com/subject/hcsjiftx.html