【js】什么是函数节流与函数去抖
生活随笔
收集整理的這篇文章主要介紹了
【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)
}
}
懶加載
一屏一屏加載圖片，可以減少服務器加載壓力
預加載
提前加載內容，但不渲染，或隱藏的。會加重服務器壓力
更多知識點和詳細，之后補上
總結
以上是生活随笔為你收集整理的【js】什么是函数节流与函数去抖的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OC(构造函数,分类等知识总结)
- 下一篇： 应用安全 - 平台 | 工具 - Nex