很多**都會提供乙個按鈕：用於返回頂部。
這個按鈕只會在滾動到距離頂部一定位置的時候才出現-(監聽滾動事件，返回當前到頂部的距離)
function showtop()
window.onscroll = showtop
實際應用上不需要高頻執行反饋，這樣會影響瀏覽器效能，如何優化成為問題。
第一種思路：防抖(debounce)在第一次觸發事件時，不立即執行函式，而給出乙個期限值比如200ms
·如果在200ms內沒有再次觸發滾動事件，就執行函式
·如果在200ms內再次觸發了滾動事件，當前計時取消，重新開始計時
效果：短時間能大量觸發同一事件，只會執行一次函式。
實現：計時，實現的關鍵就是settimeout函式，還需要乙個變數來儲存計時。考慮維護全域性純淨，借助閉包實現
function debounce(fn,delay)else}}
此時，只有在停止滾動1秒之後，才會列印出滾動條的位置定義：對於短時間內連續觸發的事件，防抖的含義就是讓某個時間期限內，事件處理函式只執行一次
function debounce(fn,delay)
timer = settimeout(()=>, delay);}}
var ipt = document.getelementbyid('ipt');
ipt.addeventlistener('keyup',debounce(function(e),1000))
使用上面的防抖方案來處理問題的結果是：
·如果在限定時間段內，不斷觸發滾動事件(某個使用者按住滾動條不斷的拖來拖去)，只要不停止觸發，理論上就永遠不會輸出當前距離頂部的距離
怎麼處理成為關鍵：設計一種類似控制閥門一樣定期開放的函式，也就是讓函式執行一次後，在某個時間段內失效，過了這段時間再重新啟用(類似技能冷卻時間)
function throttle(fn,delay)
valid = false //先將標誌位處於休息裝填，在定時器計時完成之前不執行函式
settimeout(() => ,delay)}}
然後接著上面的** window.onscroll = throttle(showtop,1000)function throttle(fn,delay)
timer = settimeout(()=>, delay);}}
用一句話總結防抖和節流的區別：防抖是將多次執行變為最後一次執行，節流是將多次執行變為每隔一段時間執行
平時開發常遇到的場景：
1.搜尋框input事件，例如要支援實時搜尋就可以使用節流方案(間隔一段時間就必須查詢相關的內容)，或者實現輸入間隔大於某個值，就當作使用者輸入完成，開始搜尋，具體使用哪種方案需要看業務需求
2.頁面resize事件，常用於需要做頁面適配的時候。需要根據最終呈現的頁面情況進行dom渲染(這種情形一般是使用防抖，因為只需要判斷最後一次的變化情況)
js防抖和節流
在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...
js 防抖和節流
突然被人問到節流和防抖的區別，一臉大寫的懵逼，一直以為他倆是乙個東西。那趕緊學習一下吧。定義 多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。原理 對事件處理函式做延時執行，如果在設定的時間內再次觸發事件函式，清除定時器 cleartimeout 重新計時。適用場景 乙個輸入框連...
js防抖和節流
輸入框進行搜尋時，如果使用者停止輸入並且過了一定時間，才真正開始檢查輸入框的值，用來節約瀏覽器資源 還有配置動態rem也可以使用防抖函式 防抖 function shake fn,delay timer settimeout delay 處理函式 function handle 滾動事件 docum...