web-dev-qa-db-fra.com

Lodash Debounce ne rebondit pas

J'essaie de anti-rebond une fonction en utilisant Lodash , et bien qu'il invoque la fonction, il ne semble pas du tout anti-rebond. Mon problème ne semble pas être la même erreur que ce que j'ai vu ailleurs sur SO ou Google (généralement, ils n'invoquent pas la fonction que _.debounce Renvoie).

Mon implémentation actuellement super simple est la suivante (en Angular avec CoffeeScript):

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

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

Dans JS, je crois que c'est:

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

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

J'exécute s.search() en tapant dans une zone de saisie, et si je tape du charabia très rapidement, la console affiche "faisant une demande de recherche" à chaque pression de touche, tant de fois par seconde - indiquant qu'il n'a pas ' t été débité du tout.

Des idées sur ce que je fais mal?

javascriptangularjscoffeescriptunderscore.jslodash
22
Sasha

_.debouncecrée une fonction qui rebondit la fonction qui lui est passée. Ce que votre s.search la fonction fait appelle _.debounce encore une fois à chaque fois s.search est appelé. Cela crée une toute nouvelle fonction à chaque fois, donc il n'y a rien à rebondir.

La solution consiste donc à supprimer la flèche et la paire de parenthèses supplémentaire et à vous assurer que s._makeSearchRequest est défini avant d'y accéder:

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

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

Exemple (en utilisant JavaScript):

var s;

s = {};

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

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

// call s.search three times in a row
s.search(1);
s.search(2);
s.search(3);

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

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

// timer to show passage 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>
35
JLRishe

Essaye ça:

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

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

POC: http://jsfiddle.net/bvaughn/3saj6znk/

2
bvaughn