0
後續問題explanation of a JavaScript debounce function 爲什麼如何調用debounce函數的例子只提供兩個參數? (去抖功能有三個參數。)JavaScript去抖功能,爲什麼只有兩個參數?
後續問題explanation of a JavaScript debounce function 爲什麼如何調用debounce函數的例子只提供兩個參數? (去抖功能有三個參數。)JavaScript去抖功能,爲什麼只有兩個參數?
我給你做了一個小例子。我希望你能理解在給定的文章中描述的方式和原理。
function debounce(func, wait, immediate){
var timeout; //create timeout for the given "func"tion
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null; //clear/reset the timeout
if (!immediate) func.apply(context, args); //call function if immediate is "false" or "null/undefined"
};
var callNow = immediate && !timeout; //full if statement below
//if((immediate != null || immediate == true) && (timeout == null || timeout == false))
//callNow = true;
clearTimeout(timeout); //clear the last timeout
timeout = setTimeout(later, wait); //call function "later" after "wait"-time
if (callNow) func.apply(context, args); //call function immediately (if-statement above)
};
};
var timeout;
function example(variable, wait, now){
var callNow = now && !timeout;
if(callNow) {
console.log(variable);
} else {
var logVar = function(){
timeout = null;
console.log(variable);
};
timeout = setTimeout(logVar, wait);
}
};
example("Hello World immediate", 2000, true); //immediate
example("Hello World after two seconds!", 2000); //after "wait"-time
example("Hello World immediate", 2000, true); //after "wait"-time, because there is a timeout allready
您可以更詳細地here看到這一點,它在下面的特定職位的答案一個媒體鏈接。
一個基本的反跳可以像下面
var buttonEl = document.querySelector("button");
var countryEl = document.querySelector("#counter");
var counter = 0;
buttonEl.addEventListener("click", debounce(onClick, 1000));
function debounce(cb, delay){
\t var lastCallTime = new Date().getTime();
return function(){
\t if((new Date().getTime() - lastCallTime) > delay){
\t lastCallTime = new Date().getTime();
\t \t cb.call(this, arguments);
}
}
}
function onClick(event){
\t //console.log(this, event);
countryEl.innerHTML = counter++;
}
<button>
Click Me!!
</button>
<div id="counter">
</div>
這也許應該已經在鏈接的線程回答的評論來實現。而不是一個新的問題。 – Turnip
它說它在源代碼鏈接在這個問題 - *如果通過'立即',觸發功能的前沿,而不是尾隨* ..所以,我猜如果你提供兩個,那麼函數是在後邊緣觸發 –
不,它必須是一個新問題 - 因爲Stack Overflow不允許我發表任何評論... ;-) –