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

函数节流

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

场景：

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

搜索引擎联想词。搜索框的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)
    }
}

 

懒加载

一屏一屏加载图片，可以减少服务器加载压力

 

预加载

提前加载内容，但不渲染，或隐藏的。会加重服务器压力

 

更多知识点和详细，之后补上