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

延迟操作与函数节流问题

作者: 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)

相关文章

  • 延迟操作与函数节流问题

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

  • 函数节流(throttle)与懒加载(lazyload)

    与函数去抖类似,函数节流是也是为了防止过多的DOM操作导致浏览器崩溃问题。但其思想与函数去抖不同,可以拿咖啡机打比...

  • 函数节流与函数防抖

    函数节流与函数防抖的区别JS魔法堂:函数节流(throttle)与函数去抖(debounce)函数的防抖与节流 自...

  • 函数节流

    《JavaScript高级程序设计》中有专门应对此问题的函数节流 利用定时器,让函数执行延迟500毫秒,在500毫...

  • 函数节流(throttle)与函数去抖(debounce)

    JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)JS魔法堂:函数节流(t...

  • 函数节流与函数防抖

    节流与防抖的概念 函数节流与函数防抖的目的都是为了减少用户对服务器不必要的请求次数,以此提高服务器性能的函数。节流...

  • 定时器

    定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流 定时器:setTimeout 只...

  • js节流函数

    JS节流函数 1. 节流函数的定义 2. 节流函数的用法

  • 函数防抖和函数节流的简单实现

    函数防抖 将时间间隔较短的一组操作,归并为一个操作。 函数节流 保证函数以均匀规整的时间间隔执行。

  • JS函数防抖与节流

    函数节流和防抖在前端开发中应用广泛,例如:函数防抖可以用于对用户输入的自动补全操作、函数节流可以用于对用户浏览行为...

网友评论

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

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