資訊專欄INFORMATION COLUMN
摘要：定義定時器清空定時器重置定時器防抖流程觸發觸發定義一個定時器，返回執行內容為清除當前定時器，定義執行內容。
防抖
為了避免一些監聽事件為在自己預料的情況，頻繁觸發。or 在某些監聽命令會頻繁觸發事件比如resize、mousemove等等未防抖 示例
var count = 0,
Elem = doc.getElementById("con")
function appendCount(e) {
console.log(e);
Elem.innerHTML = count++
}
// 正常，沒有防抖的情況下，直接監聽執行
Elem.addEventListener("mousemove", function() {
appendCount()
})
這會導致，只要鼠標移動，會導致Eelm.innerHTML不斷改變?，F在看起來好像沒什么問題，如果是很多數據渲染或者請求幾千條列表數據呢？
會導致瀏覽器不斷回流和重繪。
那如何防抖呢？？觸發mousemove時間后1s內，只有不在觸發mousemove方法才會能執行appendCount()。
var count = 0,
Elem = doc.getElementById("con");
function debounce(fn, waitTime){
// 定義定時器
var timeoutFn = null;
return function (){
// 清空定時器
clearTimeout(timeoutFn);
// 重置定時器
timeoutFn = (() => {
fn.apply(this, arguments)
},waitTime)
}
}
function appendCount(){
ELem.innerHTML=count++;
}
Elem.addEventListener("mousemove", debounce(appendCount, 500))
防抖流程
mousemove觸發,觸發debounce()`
定義一個定時器timeoutFn，返回執行內容為：清除當前timeoutFn定時器( timeoutFn = null;)，定義執行內容。
// debounce() 返回內容
function (){
// 清空定時器
clearTimeout(timeoutFn);
// 重置定時器
timeoutFn = (() => {
fn.apply(this, arguments)
},waitTime)
}
當mousemove再觸發，timeoutFn定時器再次清空，重新定義執行內容
只有等到最后一次mousemove，定時器沒有被debounce()清除timeoutFn定時器，最后執行 fn.apply(this, agruments);
節流相對比防抖，我是這樣理解節流的:當我們想觸發在一段時間范圍有且只觸發一次這樣的事件，這樣我們可以更節約我們的資源和網絡請求。
就當上面的AppendCount()舉例，我只想在3s內之能觸發一次事件AppendCount()。
那么應該怎么處理呢？
var count = 0,
Elem = doc.getElementById("con");
function throttle(fn,waitTime){
var timeoutFn = null;
return function () {
// 如果存在timeoutFn定時器，則等待timeoutFn執行完成
if(!timeoutFn){
timeoutFn = (() => {
// 置空定時器
clearTimeout(timeoutFn)
fn.apply(this, arguments)
},waitTime)
}
}
}
function appendCount(){
ELem.innerHTML=count++;
}
Elem.addEventListener("mousemove", throttle(appendCount, 3000))
這和防抖不同的是，是等待timeoutFn執行完成后，通過clearTimeout(timeoutFn)置空，那么在3s后才能再次執行timeoutFn
還有一個寫法，和上面有一點不同，上面的是當在第1s觸發throttle，但是要在第4s才能執行appendCount。但是下面是立即執行，當第1s觸發throttle,就執行appendCount,然后在第4s后可以再次會發throttle
var count = 0,
Elem = doc.getElementById("con");
function throttle(fn, waitTime){
// 定義定時器、執行狀態
var timeoutFn = null,
isRuning = false;
return function () {
// 如果不在執行狀態
if(!isRuning){
// 開啟執行狀態
isRuning = true;
// 定義定時器
timeoutFn =(() => {
fn.apply(this, arguments);
// 執行完成，關閉執行狀態
isRuning = false;
},waitTime)
}
}
}
function appendCount(){
ELem.innerHTML=count++;
}
Elem.addEventListener("mousemove", throttle(appendCount, 3000))
參考
JavaScript專題之跟著underscore學節流
JavaScript專題之跟著underscore學防抖
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106055.html
摘要：定義定時器清空定時器重置定時器防抖流程觸發觸發定義一個定時器，返回執行內容為清除當前定時器，定義執行內容。 防抖 為了避免一些監聽事件為在自己預料的情況，頻繁觸發。or 在某些監聽命令會頻繁觸發事件比如resize、mousemove等等 未防抖 示例 var count = 0, Elem = doc.getElementById(con) ...
摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。 原博客地址，歡迎star 函數防抖和節流 函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...
摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。 啥是節流？ 節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...
摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。 啥是節流？ 節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...
閱讀 885·2021-10-13 09:39
閱讀 3535·2021-09-26 10:16
閱讀 2869·2019-08-30 15:54
閱讀 1047·2019-08-30 14:22
閱讀 2893·2019-08-29 15:39
閱讀 3258·2019-08-27 10:52
閱讀 815·2019-08-26 13:59
閱讀 1710·2019-08-26 12:20
