[Ajax] - Dilemme module like / unlike

Bonsoir,

Pour gérer le fait qu'un utilisateur clique 50 fois à la suite, tu peux implémenter un systême de bounce, c'est à dire que lorsque tu cliques, tu as un timer qui se décrémente. Lorsqu'il est à 0, tu lances ton appel. Chaque clic relance le timer.

Pour le fait de gérer plusieurs personnes qui likent en même temps, tu peux créer une queue, Chaque like va se mettre dans une queue et au bout d'un moment, tu va tous les gérer en même temps.

Bonsoir.
Tu pourrais par exemple limiter l'utilisateur à 1 like/dislike pour chaque post.
De cette manière il n'aura aucune raison de vouloir s'amuser à flooder le bouton de like s'il n'en a pas la possibilité de le faire.

Voila une implémentation de debounce et comment l'appeler

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

$('.myButton').on('click', function() {
  debounce(function foobar() {
    // lancer la requete AJAX
    // ...
    // ...
  }, 300); // la fonction foobar se lancera 300ms apres le dernier clic de l'utilisateur
});

Pour la queue, tu peux regarder du côté de ton framework backend, il y a de grandes chances que cela soit déjà implémenté.

/**
  * Permet de lancer une fonction apres un certain delai
  * Si l'event appelant debounce est appelé avant le délai, le timer se réinitialise
  * @param fn la fonction à appeler
  * @param delay le délai en ms avant d'appeler fn
  */
function debounce(fn, delay) {
  // on crée une variable contenant notre timer
  // cette variable est crée à la création de la fonction debounce (donc une seule fois)
  var timer = null;

  // cette fonction myFn est appellée à chaque fois que debounce est appelé
  return function myFn() {
   // on récupère le contexte (this, car il change suivant le scope) et les arguments.
   // this : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this
   // arguments: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
    var context = this, args = arguments;

    // on vide le timer actuel
    // cette fonction ne fait rien la premiere fois car timer est null
    // cette fonction stoppe le timer précédent lors des autres appels
    clearTimeout(timer);

    // on redéfinit un nouveau timer
    // on lui passe la fonction à appeler et le délai apres lequel la fonction sera appelée
    // https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
    timer = setTimeout(function () {

      // on appele la fonction fn passée en paramètre en lui spécifiant le bon contexte et les arguments
      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
      fn.apply(context, args);
    }, delay);
  };
}

// ATTENTION : j'utilise jQuery pour l'exemple
// on définit un listener sur l'event click pour un élément possédant la classe myButton
// lorsque cette élément est cliqué, on appelle la fonction clickButton.
$('.myButton').on('click', function clickButton() {

  // comme vu plus haut, ceci va appelé la fonction myFn contenue dans debounce
  debounce(function foobar() {
    // lancer la requete AJAX
    // ...
    // ...
  }, 300); // la fonction foobar se lancera 300ms apres le dernier clic de l'utilisateur
});

Pour l'array, c'est une version très simplifiée d'une queue mais tu peux le faire comme ça oui.