防抖
概述：在規定時間內只執行一次（執行最后一次）
舉個例子：電梯關門案例
-
a 進入電梯 等待5s后 就可以上升了
-
在a等待了4s中后 b過來 那么之前的等待就結束了 開始新的等待
-
在b等待了3s后 c過來 那么之前的等待也結束了 開始新的等待
-
.... 直到最后一次等待結束 電梯就上升 （實際電梯上升這個操作 只執行一次 是最后一次）
防抖實作
//執行的函式 等待的時間 function debounce(fn,delay){ var timer = null //記錄有沒有人在等 return function(){ if(timer) clearTimeout(timer) //有人等 上次等待清除 timer = setTimeout(fn,delay) //開始新的等待 } }
示例
let fn = debounce(function(){ console.log('移進去了'); },500) //div移進只執行最后一次 document.querySelector('div').onmouseenter = function(){ fn() }
節流
概述： 在一定時間范圍內 執行第一次 （減少執行次數）
舉個例子：高鐵上廁所案例
-
當燈是綠燈的時候 a進去了 這個燈變紅燈
-
a 沒有執行完的時候 b進不去 只有當a 執行完 把紅燈變成綠燈 b才能進去
-
同樣的 c也是一樣的
節流代碼實作
function throttle(fn,delay){ var timer = null //默認沒有人 return function(){ //判斷當前是否有人 if(timer) return //有人不做了 判斷節流閥是否開啟 timer = setTimerout(()=>{ fn() timer = null //做完了 將節流閥關閉 },delay) } }
示例
let fn = throttle(function(){ console.log('移進去了'); },5000) document.querySelector('div').onmouseenter = function(){ fn() }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502257.html
標籤：其他
下一篇：記錄第一次給開源專案提 PR