Problème avec la portée des variables Javascript

Question

J'ai une variable mutedUser que je voudrais faire persister dans une autre fonction. J'ai un peu de mal à faire persister la variable en dehors de l'événement de clic. Quelle serait la meilleure façon de faire en sorte que la fonction "return mutedUser" conserve l'ajout de la chaîne "muted" si les conditions de l'instruction if sont remplies ? Merci !

*Les logs de la console étaient des vérifications pour voir où la persistance s'arrête.

this.isUserMuted = function isUserMuted(payload) {
  var mutedUser = '';
  // If mute button is clicked place them into muted users list
  // check for duplicates in list
  $("#messages-wrapper").off('click', '.message button.muteButton');
  $("#messages-wrapper").on('click', '.message button.muteButton', function(e) {

      $('#unMute').show();

      //create userId reference variable
      var chatUserID = parseInt($(this).parent().parent().attr("data-type"));

      //store userId in muted user object
      mutedUsers[chatUserID] = {};
      mutedUsers[chatUserID].id = chatUserID;
      mutedUsers[chatUserID].muted = true;

      if (mutedUsers[chatUserID] !== null && mutedUsers[chatUserID].id === payload.a) {
          console.log("user is now muted");
          mutedUser += ' muted';
          console.log(mutedUser + 1);
      }
      console.log(mutedUser + 2);
  });
  return mutedUser;
};

Answer 1

Si je comprends ce que vous essayez de faire (en regardant le code), ce serait la meilleure approche :

// If mute button is clicked place them into muted users list
// check for duplicates in list
$("#messages-wrapper").off('click', '.message button.muteButton');
$("#messages-wrapper").on('click', '.message button.muteButton', function(e) {
    $('#unMute').show();

    //create userId reference variable
    var chatUserID = parseInt($(this).parent().parent().attr("data-type"));

    //store userId in muted user object
    mutedUsers[chatUserID] = {};
    mutedUsers[chatUserID].id = chatUserID;
    mutedUsers[chatUserID].muted = true;
});

this.isUserMuted = function isUserMuted(payload) {
  var mutedUser = '';

  if (mutedUsers[payload.a] !== null) {
      mutedUser += ' muted';
  }

  return mutedUser;
};

Le code conserve le tableau de mutedUsers et isUserMuted vérifie si l'utilisateur fourni est dans ce tableau. Dans le code que vous avez fourni, vous attacheriez un nouveau gestionnaire d'événement chaque fois que isUserMuted est appelée

En isUserMuted pourrait même être raccourcie :

this.isUserMuted = function isUserMuted(payload) {
  return mutedUsers[payload.a] !== null ? ' muted' : '';
};

Answer 2

Modifier

Désolé, je me suis trompé. Une autre façon est de passer dans cette variable, c'est à dire

this.isUserMuted = function isUserMuted(payload, isMuted) {
  isMuted = '';
  // If mute button is clicked place them into muted users list
  // check for duplicates in list
  $("#messages-wrapper").off('click', '.message button.muteButton');
  $("#messages-wrapper").on('click', '.message button.muteButton', function(e) {

      $('#unMute').show();

      //create userId reference variable
      var chatUserID = parseInt($(this).parent().parent().attr("data-type"));

      //store userId in muted user object
      mutedUsers[chatUserID] = {};
      mutedUsers[chatUserID].id = chatUserID;
      mutedUsers[chatUserID].muted = true;

      if (mutedUsers[chatUserID] !== null && mutedUsers[chatUserID].id === payload.a) {
          console.log("user is now muted");
          isMuted += ' muted';
          console.log(mutedUser + 1);
      }
      console.log(mutedUser + 2);
  });
  return isMuted;
};

Answer 3

Tu ne peux pas. Si vous renvoyez une chaîne de caractères à partir de la fonction, elle sera toujours transmise par valeur, c'est-à-dire copiée, et sa valeur ne changera plus. Vous devez renvoyer une fonction qui peut accéder à la valeur actuelle de la variable locale, ou un objet avec une propriété qui change.

Puisque vous semblez déjà avoir un objet, l'option 2 s'adaptera bien ici :

function User() { // or whatever you have
    …

    var user = this;
    // If mute button is clicked place them into muted users list
    // check for duplicates in list
    $("#messages-wrapper").on('click', '.message button.muteButton', function(e) {

        $('#unMute').show();

        //store userId in muted user object
        mutedUsers[user.id] = user;
        user.muted = true;
    });
    this.muted = false;
    this.isUserMuted = function() {
        return this.muted ? ' muted' : '';
    }
}