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

函数节流意思:节省流量,不会一直访问。|指定时间内不执行,指定时间后执行。|一段时间内只执行一次场景:比如控制游戏人物攻击,时间内就算按得很快,也只能砍一刀,过后才能砍第二刀。搜索引擎联想词。搜索框的oninput事件节流。参数:一个函数,一个时间返回:一个函数对比时间进行处理functionthrottle(func,time){letlastTime=nullreturnfunction(){...

【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.guoxiongfei.cn/cntech/17084.html