38°

【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)
    }
}

 

懒加载

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

 

预加载

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

 

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

原文链接:https://www.cnblogs.com/wuhairui/p/10859837.html

全部评论: 0

    我有话说: