【js】什么是函数节流与函数去抖

佚名 6年前 (2019-05-14) 随笔 1224人围观抢沙发百度已收录

函数节流

意思：节省流量，不会一直访问。 | 指定时间内不执行，指定时间后执行。 | 一段时间内只执行一次

场景：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

比如控制游戏人物攻击，时间内就算按得很快，也只能砍一刀，过后才能砍第二刀。

搜索引擎联想词。搜索框的oninput事件节流。

参数：一个函数，一个时间

返回：一个函数

对比时间进行处理

function throttle(func,time){
    let lastTime=null
    return function(){
        let now=new Date()
        if(now-lastTime-time > 0){
            func()
            lastTime = now
        }
    }
}
//调用
let run=throttle(function(){
    console.log(123)
},1000)
window.addEventListener('scroll',run)

function throttle(func,time){
    let prev=0;
    return function(){
        let now=Date.now()
        let _this=this;
        if(now-prev >= time){
            func.apply(this,arguments)
            prev = now
        }
    }
}

let d1=document.querySelector("#d1")
let input1=document.querySelector("#input1")
input1.onclick=throttle(function(){
    d1.innerText=parseInt(d1.innerText)+1
},1000)

函数防抖

意思：防止都抖动。空闲时间后只执行一次。

场景：

参数：一个函数，一个时间

返回：一个函数

上拉加载下一页。当页面滚动结束后，若在页面底部，再执行加载。

输入框，当用户频繁输入时，不执行，停止输入时执行

clearTimeout和setTimeout进行处理。

function debounce(func,time){
    let timer=null
    return function(){
        clearTimeout(timer)
        timer=setTimeout(()=>{
            func.apply(this,arguments)
        },time)
    }
}