JavaScript debounce 函数，为什么只有两个参数？答案

【问题标题】：JavaScript debounce function, why only two arguments?JavaScript debounce 函数，为什么只有两个参数？
【发布时间】：2017-05-24 14:46:52
【问题描述】：

向explanation of a JavaScript debounce function 提出后续问题为什么如何调用 debounce 函数的示例只提供两个参数？（去抖函数有三个参数。）

【问题讨论】：

这可能应该是对链接线程中答案的评论。而不是一个新问题。
它在该问题中链接的源代码中说 - 如果传递了immediate，则在前沿触发函数，而不是尾随 ..所以，我猜猜如果你只提供两个，那么函数会在后沿触发
不，这一定是一个新问题——因为 Stack Overflow 不允许我发表任何评论...... ;-)
@Jaromanda，所以您实际上是在说您可以跳过在 JavaScript 中提供参数？如果是，那么对应的参数在被调用函数中的值是多少？
@GoranW 您可以传递“null”或“false”，或者保留函数的最后一个参数。 function x(one, two, three) 执行如下：x("abc", "def")。函数内部："one = "abc", two = "def", three = undefined。在这种情况下，您可以检查“null/undefined”。 JavaScript 将“null”、“undefined”和“false”声明为“false”，并将选择 else-path。

标签： javascript

【解决方案1】：

我为你做了一个小例子。我希望您了解它是如何以及为什么按照给定帖子中的描述工作的。

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 中更详细地看到这一点，它已经在给定帖子下方的答案之一中。

【讨论】：

【解决方案2】：

可以像下面这样实现基本的去抖动

var buttonEl = document.querySelector("button");
var countryEl = document.querySelector("#counter");
var counter = 0;

buttonEl.addEventListener("click", debounce(onClick, 1000));

function debounce(cb, delay){
	var lastCallTime = new Date().getTime();
  return function(){
  	if( (new Date().getTime() - lastCallTime) > delay){
    	lastCallTime = new Date().getTime();
  		cb.call(this, arguments);
    }
  }
}


function onClick(event){
	//console.log(this, event);
  countryEl.innerHTML = counter++;
}

<button>
Click Me!!
</button>

<div id="counter">
  
</div>

【讨论】：