在前端開發當中，我們都知道有些互動事件，會頻繁觸發。這樣會導致我們的頁面渲染效能，如果頻繁觸發介面呼叫的話，會直接導致伺服器效能的浪費。話不多說，盤它！
我們先簡單列一下
onresize onmousemove onkeydown srcoll onkeyup我們先看一段測試用例
>
>
未做處理：
type
="text"
id="ipt"
>
>
函式被呼叫：
"count"
>
0span
>
次div
>
li>
ul>
const ocount = document.
('count');
const oipt = document.
getelementbyid
('ipt');
let init =
0oipt.
onkeyup
=function()
看一下輸入時候的執行效果。
我們不難發現，每次輸入都會觸發事件的執行。如果我們用這樣的方式去檢測：當前使用者輸入的使用者名稱是否可用？如此高頻率的觸發不僅是極大的浪費，而且使用者還沒有輸入完成就檢測，對使用者的提示也不好。應該等使用者輸入完了，我們再去觸發函式，下面我們優化一下：
// 設定乙個預設值 300ms
const ocount2 = document.
getelementbyid
('count2');
const oipt2 = document.
getelementbyid
('ipt2');
// 設定乙個預設值 300ms
const
debounce
=(fn, wait =
300)
=>
, wait)}}
let init2 =
0oipt2.onkeyup =
debounce
(function()
,500
)//可以自己定義延遲時間間隔
可以看到，加了防抖函式之後，當我們在頻繁輸入的時候，函式並沒有執行， 只有在函式指定的間隔內（500ms）不再輸入了，才會執行函式。如果在時間間隔之內繼續輸入，會觸發函式重新計數。
函式防抖的概念：在事件觸發後的n秒之後，再去執行真正需要執行的函式，如果在這n秒之內事件又被觸發，則重新開始計時
也就是說，如果使用者在間隔時間內一直觸發函式，那麼這個防抖函式內部的真正需要執行的函式將永遠無法執行。
那有沒有什麼好點的辦法，讓使用者在輸入過程中，既能觸發真實需要的函式，又能達到優化的效果？答案是肯定的，那就是：
const ocount3 = document.
getelementbyid
('count3');
const oipt3 = document.
getelementbyid
('ipt3');
const otime = document.
getelementbyid
('time');
const
throttle
=(fn, threshhold =
1000
)=>
, threshhold)
}else}}
let init3 =
0const throttleipt =
throttle
(function()
,1000
)// 初始化一下
oipt3.
onkeyup
=function()
可以看到，任由我們怎麼輸入，函式會按照我們設定的時間（1s），每秒執行一次。你可以設定更大。
他們之間的優缺點，等我下次總結吧！
函式截流和防抖
使用場景 有些時候，部分函式會高頻觸發，比如 function showtop window.onscroll showtop 這個函式的觸發頻率非常的高，然而實際上我們並不需要如此高頻的反饋，畢竟瀏覽器的效能是有限的，不應該浪費在這裡，優化這種場景的做法就是防抖。其他使用場景 頁面resize事件...
防抖與截流總結
防抖 是指在事件觸發結束後延時一段時間再去執行 如果在延時期間再次觸發該事件，則重新計算延時時間 第乙個引數為事件觸發後需要執行的方法，第二個引數為延時時間function debounce method,delay timer settimeout function delay let fun d...
前端之頁面優化 節流與防抖
防抖作用就是在事件觸發的過程中，不去業務處理，而是等該時間結束後，則馬上進行業務處理，這裡事件結束後的多長時間去執行業務 由我們自己設定的，也就是下面的引數wait,單位毫秒。防抖，防抖，防抖 舉個例子，當使用onkeyup監聽input框中的輸入，如果使用者按住乙個6不放，那監聽事件一直被觸發，浪...