【js】什么是函数节流与函数去抖
生活随笔
收集整理的這篇文章主要介紹了
【js】什么是函数节流与函数去抖
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
函數(shù)節(jié)流
意思：節(jié)省流量，不會一直訪問。 | 指定時間內(nèi)不執(zhí)行，指定時間后執(zhí)行。 | 一段時間內(nèi)只執(zhí)行一次
場景：
比如控制游戲人物攻擊，時間內(nèi)就算按得很快，也只能砍一刀，過后才能砍第二刀。
搜索引擎聯(lián)想詞。搜索框的oninput事件節(jié)流。
參數(shù)：一個函數(shù)，一個時間
返回：一個函數(shù)
對比時間進(jìn)行處理
function throttle(func,time){
let lastTime=null
return function(){
let now=new Date()
if(now-lastTime-time > 0){
func()
lastTime = now
}
}
}
//調(diào)用
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)
函數(shù)防抖
意思：防止都抖動。空閑時間后只執(zhí)行一次。
場景：
搜索框的聯(lián)想詞，輸入框連續(xù)輸入文字時不會去查詢后臺接口，輸入暫停時才會去查詢接口
參數(shù)：一個函數(shù)，一個時間
返回：一個函數(shù)
上拉加載下一頁。當(dāng)頁面滾動結(jié)束后，若在頁面底部，再執(zhí)行加載。
輸入框，當(dāng)用戶頻繁輸入時，不執(zhí)行，停止輸入時執(zhí)行
clearTimeout和setTimeout進(jìn)行處理。
function debounce(func,time){
let timer=null
return function(){
clearTimeout(timer)
timer=setTimeout(()=>{
func.apply(this,arguments)
},time)
}
}
懶加載
一屏一屏加載圖片，可以減少服務(wù)器加載壓力
預(yù)加載
提前加載內(nèi)容，但不渲染，或隱藏的。會加重服務(wù)器壓力
更多知識點和詳細(xì)，之后補(bǔ)上
總結(jié)
以上是生活随笔為你收集整理的【js】什么是函数节流与函数去抖的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OC(构造函数,分类等知识总结)
- 下一篇： 应用安全 - 平台 | 工具 - Nex