溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下JavaScript怎么實現underscore防抖的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
在前端開發中會遇到一些頻繁的事件觸發，比如：
window 的 resize、scroll
mousedown、mousemove
keyup、keydown
……
為此，我們舉個示例代碼來了解事件如何頻繁的觸發：
我們寫個 index.html 文件：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>debounce</title>
<style>
#container{
width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="debounce.js"></script>
</body>
</html>debounce.js 文件的代碼如下：
var count = 1;
var container = document.getElementById('container');
function getUserAction() {
container.innerHTML = count++;
};
container.onmousemove = getUserAction;因為這個例子很簡單，所以瀏覽器完全反應的過來，可是如果是復雜的回調函數或是 ajax 請求呢？假設 1 秒觸發了 60 次，每個回調就必須在 1000 / 60 = 16.67ms 內完成，否則就會有卡頓出現。
為了解決這個問題，一般有兩種解決方案：
debounce 防抖
throttle 節流
今天重點講講防抖的實現。
防抖的原理就是：你盡管觸發事件，但是我一定在事件觸發 n 秒后才執行，如果你在一個事件觸發的 n 秒內又觸發了這個事件，那我就以新的事件的時間為準，n 秒后才執行，總之，就是要等你觸發完事件 n 秒內不再觸發事件，我才執行，真是任性吶!
根據這段表述，我們可以寫第一版的代碼：
// 第一版
function debounce(func, wait) {
var timeout;
return function () {
clearTimeout(timeout)
timeout = setTimeout(func, wait);
}
}如果我們要使用它，以最一開始的例子為例：
container.onmousemove = debounce(getUserAction, 1000);
現在隨你怎么移動，反正你移動完 1000ms 內不再觸發，我再執行事件。
頓時就從 165 次降低成了 1 次!
棒棒噠，我們接著完善它。
如果我們在 getUserAction 函數中 console.log(this)，在不使用 debounce 函數的時候，this 的值為：
<div id="container"></div>
但是如果使用我們的 debounce 函數，this 就會指向 Window 對象！
所以我們需要將 this 指向正確的對象。
我們修改下代碼：
// 第二版
function debounce(func, wait) {
var timeout;
return function () {
var context = this;
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context)
}, wait);
}
}現在 this 已經可以正確指向了。讓我們看下個問題：
JavaScript 在事件處理函數中會提供事件對象 event，我們修改下 getUserAction 函數：
function getUserAction(e) {
console.log(e);
container.innerHTML = count++;
};如果我們不使用 debouce 函數，這里會打印 MouseEvent 對象，如圖所示：
MouseEvent
但是在我們實現的 debounce 函數中，卻只會打印 undefined!
所以我們再修改一下代碼：
// 第三版
function debounce(func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}再注意一個小點，getUserAction 函數可能是有返回值的，所以我們也要返回函數的執行結果
// 第四版
function debounce(func, wait) {
var timeout, result;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout)
timeout = setTimeout(function(){
result = func.apply(context, args)
}, wait);
return result;
}
}到此為止，我們修復了三個小問題：
this 指向
event 對象
返回值
這個時候，代碼已經很是完善，但是為了讓這個函數更加完善，我們接下來思考一個新的需求。
這個需求就是：
我不希望非要等到事件停止觸發后才執行，我希望立刻執行函數，然后等到停止觸發n秒后，才可以重新觸發執行。
想想這個需求也是很有道理的嘛，那我們加個 immediate 參數判斷是否是立刻執行。
// 第五版
function debounce(func, wait, immediate) {
var timeout, result;
return function () {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
// 如果已經執行過，不再執行
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) result = func.apply(context, args)
}
else {
timeout = setTimeout(function(){
result = func.apply(context, args)
}, wait);
}
return result;
}
}最后我們再思考一個小需求，我希望能取消 debounce 函數，比如說我 debounce 的時間間隔是 10 秒鐘，immediate 為 true，這樣的話，我只有等 10 秒后才能重新觸發事件，現在我希望有一個按鈕，點擊后，取消防抖，這樣我再去觸發，就可以又立刻執行啦，是不是很開心？
為了這個需求，我們寫最后一版的代碼：
// 第六版
function debounce(func, wait, immediate) {
var timeout, result;
var debounced = function () {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
// 如果已經執行過，不再執行
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) result = func.apply(context, args)
}
else {
timeout = setTimeout(function(){
result = func.apply(context, args)
}, wait);
}
return result;
};
debounced.cancel = function() {
clearTimeout(timeout);
timeout = null;
};
return debounced;
}以上就是“JavaScript怎么實現underscore防抖”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
