什麼是節流防抖？在學習這個問題前，我們先丟擲問題：
假設我現在有這麼乙個需求：根據input框輸入內容列印到控制台"text" id=
"input"
>
let input = document.
getelementbyid
('input'
) input.
addeventlistener
('keyup'
,function()
)<
/script>
<
/body>
上述**僅僅是用於列印輸入框的值，如果我需要根據輸入框的值向後台傳送ajax請求呢，這麼頻繁的傳送請求，那得多傳送多少次請求啊，那有沒有什麼辦法，可以指定當我停止輸入超過1s後再列印log或者是傳送ajax請求呢？
那就要用到settimeout定時器了，我們給定時器乙個延遲，只有停止輸入1s後才觸發某種邏輯,**如下
"text" id=
"input"
>
let input = document.
getelementbyid
('input'
)// 定義乙個定時器物件,settimeout()返回的是乙個定時器的id
let timerid =
null
// 給input輸入框繫結keyup鍵盤鬆開事件
input.
addeventlistener
('keyup'
,function()
timerid =
settimeout
(function()
,1000)}
)<
/script>
<
/body>
只有當你超過1000ms時，才會去執行定時器中的邏輯,同時因為我們有對定時器做清除，所以即便停止輸入超過1s，當我們再次輸入停止時，依舊可以出發當前定時器。
在觸發事件時，我們並不立即執行邏輯，而是給出乙個預定值，只有當預定值到來我們才執行邏輯，我們稱之為防抖。但是上面的**，沒有經過封裝，還無法做到重複使用，下面我們進行一次封裝，**如下：
function
debounce
(fn,delay=
500)
timerid =
settimeout((
)=>
,delay)}}
// 呼叫時
input.
addevent
('keyup'
,debounce
(function()
,1000))
// 如果又有input2輸入框
input2.
addeventlistener
('keyup'
,debounce
(function()
))
假設現在給某個div元素註冊drag拖拽事件,列印當前元素的位置座標。
但是我想要在可以拖拽的同時每隔100ms列印一次位置呢
#div1
<
/style>
<
/head>
"div1" draggable=
"true"
>可拖拽<
/div>
let div1 = document.
getelementbyid
('div1'
)let timerid =
null
div1.
addeventlistener
('drag'
,function
(e) timerid =
settimeout
(function
(e),
100)})
<
/script>
<
/body>
<
/html>下面依舊是封裝乙個throttle節流函式
function
throttle
(fn,delay=
500)
timerid =
settimeout((
)=>
,delay)}}
div1.
addeventlistener
('drag'
,throttle
(function
(e))
)
這裡僅作為我自己的記錄，水平有限
參考：js節流和防抖問題
js防抖節流
第一種 function debounce fn,delay delay 第二種 function debounce fn,delay delay 立即執行就是事件觸發後立即執行，然後超過一段時間沒有觸發事件，執行函式才會被觸發執行 function fn,delay timer settimeou...
JS防抖節流
在事件被觸發n秒後再執行 函式，如果在這n秒內又被觸發，則重新計時。1 使用者在輸入框中連續輸入一串字元後，只會在輸入完後去執行最後一次的查詢ajax請求，這樣可以有效減少請求次數，節約請求資源 2 window的resize scroll事件，不斷地調整瀏覽器的視窗大小 或者滾動時會觸發對應事件，...
js 防抖節流
函式防抖 將幾次操作合併為一此操作進行。原理是維護乙個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。應用 搜尋框在輸入稍有停頓時才更新推薦熱詞 function debounce handler,del...