Can't Convert Debounce ES5 to ES6

Question

I found a great debounce() function code online, but I am having a hard time converting it from ES5 to ES6.

The issue is as follows: When I use the ES5 implementation, everything works perfectly. The window is resized, console.log() is immediately triggered, and subsequent resizings are ignored until after the 500ms I specified.

However, in the ES6 implementation, the first call works immediately... but every time after that it is also delayed by 500ms, even after cooling down!

If there is anyone who knows what I am doing wrong, I would really appreciate some help.

Examples:

function debounceES5(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

const debounceES6 = (callback, wait, immediate=false) => {
  let timeout = null
  return (...args) => {
    const callNow = immediate && !timeout
    const next = () => callback(...args)
    clearTimeout(timeout)
    timeout = setTimeout(next, wait)
    if (callNow) { next() }
  }
}

document.querySelector('.es5').addEventListener('click', debounceES5(() => {console.log('clicked')}, 1000, true))

document.querySelector('.es6').addEventListener('click', debounceES6(() => {console.log('clicked')}, 1000, true))

Click both of these buttons fast and see how they react differently

<br />

<button class="es5">ES5</button>
<button class="es6">ES6</button>

By using the arrow function your inner function is using the wrong `this`. This one of the many cases where you can't use an arrow function since then you can never get `this` from the caller. — gman, May 06 '19 at 23:15
why aren't you using `;` in the ES6 code? (not that it's the problem) — Jaromanda X, May 06 '19 at 23:18
@JaromandaX, 1st line of the inner function of the working version is `var context = this` — gman, May 06 '19 at 23:18
@JaromandaX ES6 is a lot more forgiving, and I like it cleaner! — Hybrid, May 06 '19 at 23:18
@gman But the first function works perfectly, so `this` shouldnt be a problem. The ES6 version never uses `this` — Hybrid, May 06 '19 at 23:20
in ES5 code, the `later` function sets `timeout=null` - the equivalent isn't being done in ES6 code — Jaromanda X, May 06 '19 at 23:23
@JaromandaX syntax discussions are not productive and not related to the question — Andy Ray, May 06 '19 at 23:36
Posted proof the es6 debounce doesn't handle cases the es5 does. I see the answer you accepted shows my point. — gman, May 07 '19 at 00:11

Jaromanda X · Accepted Answer · 2019-05-07T00:03:39.467

Here's your ES5 function written in ES6 - without skipping ANY details (except the context which is not relevant)

const debounce = (func, wait, immediate=false) => {
    let timeout;
    return (...args) => {
        const later = () => {
            timeout = null; // added this to set same behaviour as ES5
            if (!immediate) func(...args); // this is called conditionally, just like in the ES5 version
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func(...args);
    };
};

Note, the later function does exactly what the ES5 version does

This should now behave (almost) identically to the ES5 version ... the whole context = this thing ~~seems completely weird in the ES5 version anyway~~ makes sense with example usage

However, as per comments, since the code is used for event handler, this is quite important, it's the Event Target so, you really can't return an arrow function

BEtter code would be

const debounce = (func, wait, immediate=false) => {
    let timeout;
    return function (...args) {
        const later = () => {
            timeout = null; // added this to set same behaviour as ES5
            if (!immediate) func.apply(this, args); // this is called conditionally, just like in the ES5 version
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(this, args);
    };
};

`context = this` is not weird at all, the result of the `debounce` could be assigned as a method of an object, the recording of `context` enables such a debounced method to have an appropriate `this` when invoked. — Boris B., May 06 '19 at 23:48
This works! My problem was that I called `next()` on the last line, instead of `func(...args)`. Thank you for your patience! — Hybrid, May 06 '19 at 23:49
@Kaiido ... I think I'm out of my depth, since the example usage code is passing in an arrow function as the callback ... no, nevermind, both codes work identically with my amendments ... thanks for the heads up — Jaromanda X, May 06 '19 at 23:57

gman · Answer 2 · 2019-05-07T00:30:29.157

You can't use arrow functions in debounce (well, you need to know where you can and where you can't)

Arrow function bind this when they are created. That means the this in an array will never and can never change.

For example

'use strict';

function safeToString(v) {
  return v === undefined 
      ? 'undefined' 
      : v.toString();
}

function regularFunc() {
  console.log('regular:', safeToString(this));
}

const arrowFunc = () => {
  console.log('arrow:', safeToString(this));
};

regularFunc();
arrowFunc();

regularFunc.call("hello");
arrowFunc.call("world");

Notice in the regularFunc case this is undefined and later we can redefine it to hello but in the arrowFunc case it's always [Object Window]

So no to your ES6 debounce. Here's The supposedly working ES6 version

const debounce = (callback, wait, immediate) => {
    let timeout;
    return (...args) => {
      const callNow = immediate && !timeout
      const next = () => callback(...args)
      clearTimeout(timeout)
      timeout = setTimeout(next, wait)
      if (callNow) { next() }
    }
  }

Let's test it

function es5Debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

const es6Debounce = (callback, wait, immediate) => {
  let timeout;
  return (...args) => {
    const callNow = immediate && !timeout
    const next = () => callback(...args)
    clearTimeout(timeout)
    timeout = setTimeout(next, wait)
    if (callNow) {
      next()
    }
  }
}

function safeToString(v) {
  return v === undefined
      ? 'undefined'
      : v.toString();
}

class Test {
  constructor(name) {
    this.name = name;
  }
  log(...args) {
    console.log(
        this ? this.name : 'undefined', 
        safeToString(this),
        ...args);
  }
}

class ES5Test extends Test {
  constructor() {
    super('ES5:');
  }
}
ES5Test.prototype.log = es5Debounce(ES5Test.prototype.log, 1);

class ES6Test extends Test {
  constructor() {
    super('ES6:');
  }
}
ES6Test.prototype.log = es6Debounce(ES6Test.prototype.log, 1);

const es5Test = new ES5Test();
const es6Test = new ES6Test();

es5Test.log("hello");
es6Test.log("world");

As you can see the es6 version fails because this is wrong. If you only ever use non-member functions then es6Debounce will look like it's working but as soon as you use member functions on a class or event handlers you'll see es6Debounce does not work, this is not set correctly.

The code here tries to show the error. ES5Class and ES6Class are identical. The test should print

ES5: [object Object] hello
ES6: [object Object] world

instead it prints

ES5: [object Object] hello
undefined undefined world

As another example let's try an event handler

function es5Debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

const es6Debounce = (callback, wait, immediate) => {
  let timeout;
  return (...args) => {
    const callNow = immediate && !timeout
    const next = () => callback(...args)
    clearTimeout(timeout)
    timeout = setTimeout(next, wait)
    if (callNow) {
      next()
    }
  }
}

function mousemove(e) {
  console.log(this.id, e.pageX, e.pageY);
}

document.querySelector('#es5')
    .addEventListener('mousemove', es5Debounce(mousemove));
document.querySelector('#es6')
    .addEventListener('mousemove', es6Debounce(mousemove));

#es5, #es6 {
  margin: 1em;
  width: 10em;
  height: 2em;
  display: inline-block;
}
#es5 {
  background: orange;
}
#es6 {
  background: yellow;
}

<div id="es5">es5</div>
<div id="es6">es6</div>

Move the mouse over the 2 areas. Notice again the es6 one is wrong.

Whether or not that's important do you I have no idea but the original debounce you posted explicitly has code to make that case work.

For my use case it does not make a difference, but I understand how it can break code which would rely on `this`. I will use the safer code you and @jaro provided, in case I reuse this code somewhere that context is important. Thank you! — Hybrid, May 07 '19 at 00:14
typical use case `someElement.onmousemove = debounce(somehandler)` which will fail on the es6 version above — gman, May 07 '19 at 00:24
If you look at the "use" case in the question, with the arrow function being used for the callback function, both es5 and es6 code will "fail" — Jaromanda X, May 07 '19 at 00:38

score 1 · Answer 3 · answered Jul 18 '20 at 08:20

My preferred solution is the following one taken from Chris Boakes' blog post Understanding how a JavaScript ES6 debounce function works:

function debounce(callback, wait) {
    let timeout;
    return (...args) => {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => callback.apply(context, args), wait);
    };
}

Although it does not offer immediate arg. is still good enough for it to be shared here.

Can't Convert Debounce ES5 to ES6

3 Answers3