js的抖動 在 js 中 改變視窗大小 & 上下滾動滾動條 & 反覆向輸入框中輸入內容 ... , 如果綁定了相應的事件 , 這些事件的觸發頻率非常高, 嚴重影響用戶體驗和伺服器的性能 , 這種問題 在js中 就叫 js 的抖動 . 解決方法 : 防抖 & 節流 js的防抖 就是在 觸發事件 中設置 ...
js的抖動
在 js 中 改變視窗大小 & 上下滾動滾動條 & 反覆向輸入框中輸入內容 ... , 如果綁定了相應的事件 , 這些事件的觸發頻率非常高, 嚴重影響用戶體驗和伺服器的性能 , 這種問題 在js中 就叫 js 的抖動 .
解決方法 : 防抖 & 節流
js的防抖
就是在 觸發事件 中設置一個定時器來延遲 綁定事件 的生效 , 並且每次在 觸發事件 中清除定時器 , 直到兩次 觸發事件 生效的間隔 能夠觸發定時器才會時 綁定事件 生效 (持續觸發並不會對應函數 , 只有當兩次觸發間隔一定的時間才會執行對應的函數)
<style> .mybox { width: 600px; height: 1500px; background-color: pink; margin: 0 auto; } </style> </head> <body> <div class="mybox"></div> </body> <script> var timer; window.onscroll = function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { console.log('我滾啦') }, 1000) } </script>
js的節流
當觸發事件時 , 每隔固定時間 執行一次函數
步驟 :
1.進入觸發函數中先 獲取 一次當前時間 beginTime
2.返回一個匿名函數
a.在獲取一次當前時間 currentTime
b.得到兩次獲取時間的差值 cpace
c.將space 與間隔時間進行比較 , 如果不小於間隔時間就調用執行函數 , 並且此時獲取當前時間賦值給 beginTime
<style> .mybox { width: 600px; height: 1500px; background-color: pink; margin: 0 auto; } </style> </head> <body> <div class="mybox"></div> </body> <script> function fn() { //執行函數 console.log('我滾啦') } function throttle(wait, func) { var beginTime = Date.now() return function () { var currentTime = Date.now() var space = currentTime - beginTime if (space >= wait) { func() beginTime = Date.now() } } } window.onscroll = throttle(1000, fn) </script>
