Lodash Debounce failing to properly debounce

Question

Lodash Debounce failing to properly debounce

Currently, I am attempting to use Lodash to debounce a function but it doesn't seem to be working properly. My issue appears to be different from what others have experienced on both Stack Overflow and Google when using the _.debounce method.

The implementation I have right now is quite simple (written in Angular with CoffeeScript):

  s.search = -> _.debounce( s._makeSearchRequest, 1000 )()

  s._makeSearchRequest = -> console.log("making search request")

In JavaScript, the code looks like this:

  s.search = function() { _.debounce( s._makeSearchRequest, 1000 )() }

  s._makeSearchRequest = function() { console.log("making search request") }

When I type into an input box and quickly enter random characters, "making search request" is printed multiple times per second in the console, indicating that the debouncing isn't happening as expected.

Any suggestions on what might be causing this issue?

javascript angularjs coffeescript underscore.js lodash

Answer 1

Answer №1

_.debounce generates a function that debounces the specified function. The issue with your s.search function is that it calls _.debounce repeatedly every time s.search is invoked, resulting in the creation of a new function each time, negating the debounce effect.

The recommended solution is to eliminate the arrow and extra parentheses, ensuring that s._makeSearchRequest is defined before being accessed:


s._makeSearchRequest = -> console.log("making search request")

s.search = _.debounce( s._makeSearchRequest, 1000 )

Here's an example in JavaScript:

var s;

s = {};

s._makeSearchRequest = function(q) {
  return console.log("making search request: " + q);
};

s.search = _.debounce(s._makeSearchRequest, 1000);

// invoking s.search three times consecutively
s.search(1);
s.search(2);
s.search(3);

// invoking s.search after 500 ms
setTimeout(s.search, 500, 4);

// invoking s.search after 3 seconds
setTimeout(s.search, 3000, 5);

// timer to display the passing of time
var i = 0;
var t = setInterval(function () {
    i += 1;
    console.log(i + " seconds elapsed");
    if (i > 5) { clearInterval(t); }
}, 1000);

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

Answer 2

_.debounce generates a function that debounces the specified function. The issue with your s.search function is that it calls _.debounce repeatedly every time s.search is invoked, resulting in the creation of a new function each time, negating the debounce effect.

The recommended solution is to eliminate the arrow and extra parentheses, ensuring that s._makeSearchRequest is defined before being accessed:


s._makeSearchRequest = -> console.log("making search request")

s.search = _.debounce( s._makeSearchRequest, 1000 )

Here's an example in JavaScript:

var s;

s = {};

s._makeSearchRequest = function(q) {
  return console.log("making search request: " + q);
};

s.search = _.debounce(s._makeSearchRequest, 1000);

// invoking s.search three times consecutively
s.search(1);
s.search(2);
s.search(3);

// invoking s.search after 500 ms
setTimeout(s.search, 500, 4);

// invoking s.search after 3 seconds
setTimeout(s.search, 3000, 5);

// timer to display the passing of time
var i = 0;
var t = setInterval(function () {
    i += 1;
    console.log(i + " seconds elapsed");
    if (i > 5) { clearInterval(t); }
}, 1000);

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

Answer 3

Answer №2

Give this a shot:

The following code snippet demonstrates how to create a debounced search function in JavaScript using Underscore.js:
    
s._makeSearchRequest = function() {
    console.log("Initiating search request");
}

s.search = _.debounce(s._makeSearchRequest, 1000);

Proof of Concept: http://jsfiddle.net/example_user/abc123/

Answer 4

Give this a shot:

The following code snippet demonstrates how to create a debounced search function in JavaScript using Underscore.js:
    
s._makeSearchRequest = function() {
    console.log("Initiating search request");
}

s.search = _.debounce(s._makeSearchRequest, 1000);

Proof of Concept: http://jsfiddle.net/example_user/abc123/

Lodash Debounce failing to properly debounce

Answer №1

Answer №2

Similar questions

Reversing text in mongodb

nested sequential ajax calls

Retrieving the value of an array from a JSON data structure

Getting rid of items and bringing them back

Exploring the array mapping technique in React with nested objects

The issue with the jQuery Mobile onclick event is that it fails to remove the ui-disabled

Press the button using the spacebar

Issue encountered when attempting to utilize Next-Auth alongside Credentials Provider to authenticate within a pre-existing system

"Facing an issue with angular's $http post method as it fails to transmit

Are there any straightforward methods to fully freeze an object along with all its descendants in JavaScript (Deep Freeze)?

Assigning a variable within a parent function from a child function in JavaScript

Adjust image size based on the size of the screen

an all-encompassing loading animation designed specifically for updates to location.href

Begin the process of setting up PDF.js on the website

Does the functionality of Protractor rely on a specific version of AngularJS?

Tips for Choosing the Right Objects in Vue.js

What steps should I take to modify the date format to "dd / mm / yy"?

Saving numerous files with Promises

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

Is there a way to generate an array from 1 to X without using a loop?