JavaScript debounce function, why only two arguments?

Question

Follow-up question to explanation of a JavaScript debounce function Why do the examples of how to call the debounce function supply only two arguments? (The debounce function has three parameters.)

This should probably have been a comment on an answer in the linked thread. Rather than a new question. — Turnip, May 24 '17 at 14:48
it says it in the source linked in that question - *If `immediate` is passed, trigger the function on the leading edge, instead of the trailing* .. so, I guess if you supply on ly two, then the function is triggered on trailing edge — Jaromanda X, May 24 '17 at 14:49
No,it must be a new question -- since Stack Overflow does not allow me to post any comment ... ;-) — Goran W, May 24 '17 at 14:57
@Jaromanda, so what you are effectively saying is that you can skip supplying arguments in JavaScript? If so, then what value does the corresponding parameter have within the called function? — Goran W, May 24 '17 at 15:03
Duplicate? https://stackoverflow.com/questions/11107823/what-happens-if-i-dont-pass-a-parameter-in-a-javascript-function — Quentin, May 24 '17 at 15:05
@GoranW you can pass "null" or "false", or leave the last parameters of a function out. `function x(one, two, three)` excecuted as follows: `x("abc", "def")`. Inside the function: `"one = "abc", two = "def", three = undefined`. In this case you can check for "null/undefined". JavaScript declares "null", "undefined" and "false" as "false" and will choose the else-path. — DomeTune, May 24 '17 at 15:08
@GoranW have you looked at [this variant](http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html)? — evolutionxbox, May 24 '17 at 15:09

DomeTune · Answer 1 · 2017-05-24T15:24:21.840

I made a little example for you. I hope you understand how and why it works as descripted in the given post.

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

You can see this in more detail here, its allready in one of the answers below the given post.

score 0 · Answer 2 · answered Aug 04 '17 at 10:00

A basic debounce can be implemented like below

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>

JavaScript debounce function, why only two arguments?

2 Answers2