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