Member-only story

JavaScript Special Subject

Write a Better Debounce Function With Underscore

A step by step guide with gifs and embed demos.

Shuai Li

--

Photo by Florian Olivo on Unsplash

In front-end development, we often encounter some frequent event triggers, such as:

  1. resize, scroll
  2. mousedown, mousemove
  3. keyup, keydown
    ……

Here’s a demo to see how these events are triggered frequently.

First, let’s write an index.html file:

The code for the debounce.js file is as follows:

var count = 1;
var container = document.getElementById('container');

function getUserAction() {
container.innerHTML = count++;
};

container.onmousemove = getUserAction;

Let’s look at the effect:

--

--

No responses yet