当前位置:Gxlcms > 前端框架 > js如何实现函数防抖与节流

js如何实现函数防抖与节流

时间:2021-07-01 10:21:17 帮助过:72人阅读

概念理解

防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

相关推荐:《javascript高级教程》

js函数防抖与节流的区别:

函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。

个人踩坑

1、通过理解函数防抖与函数节流的概念后,使用闭包实现函数防抖和节流,没有考虑到对于节流,如果用户在下一次请求之前已输入完毕,但是此时不会再进行请求,则会导致最后输入的文字获取其他事件改变不发请求,即漏请求,所以需要加一个setTimeout兜底函数,且在每次准备请求的时候,设一个flag,即是否已经发送请求,如果走了正常周期发送请求,改为true,否则即为false,走setTimout,让setTimeout比剩余事件略长一些,优先走节流定时器请求;

2、如果使用箭头函数,则不需要保存this。

代码实现

 <div>
    <div>
        <input type="text" id="unDebounce">
    </div>
    <div>
        <input type="text" id="debounce">
    </div>
    <div>
        <input type="text" id="throttle">
    </div>
</div>
// 函数防抖节流
var elem1 = document.getElementById("unDebounce")
var elem2 = document.getElementById("debounce")
var elem3 = document.getElementById("throttle")
// 不防抖
function ajax1(value){
    console.log("不防抖,不节流")
    console.log(value)
}
elem1.addEventListener('keyup',function (e) {
    ajax1(e.target.value);
})
// 防抖
function ajax2(value) {
    console.log(value)
}
function debounce(func,delay){
    console.log("函数防抖")
    let timer = null;
    return function(...args){
        if(timer){
            console.log("清除定时器")
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            console.log("重新计时")
            func.call(this,...args)
        },delay)
    }
}
let debounceFn = debounce(ajax2,1000)
elem2.addEventListener('keyup',function (e) {
    debounceFn(e.target.value);
})
// // 节流
function ajax3(value){
    console.log(value)
}
function throttle(func,delay){
    console.log("函数节流")
    let lastTime = 0;
    let timer = null;
    return function (...args) {
        let flag = false ; // 还没发送数据
        let now = +new Date().getTime();
        if(timer){
            clearTimeout(timer)
        }
        if(now-lastTime>=delay){
            console.log("当前时间大于设定时间,开始执行函数")
            func.apply(this,args)
            console.log("time1",new Date().getTime())
            lastTime = now;
            flag = true; // 发送了数据
        }else{
            timer = setTimeout(()=>{
                if(!flag){ // 如果没有发送数据成功,再走这个,兜底发送请求
                    func.apply(this,args)
                    console.log("time2",new Date().getTime())
                }
            },delay-(now-lastTime)+1000) // setTimeout多一些,优先执行周期性请求
        }
    }
}
let throttleFn = throttle(ajax3,5000)
elem3.addEventListener('keyup',function (e) {
    throttleFn(e.target.value);
})

以上就是js如何实现函数防抖与节流的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行