Comment mettre en place une serrure en JavaScript

Comment quelque chose d'équivalent à lock en C# être implémenté en JavaScript?

Pour expliquer ce que je pense, un cas d'utilisation simple:

Utilisateur clique sur le bouton B. B soulève un événement onclick. Si B est dans event-state l'événement attend B être dans ready-state avant de se propager. Si B est dans ready-state, B est verrouillé et est mis à event-state, puis l'événement se propage. Lorsque l'événement est de propagation est complet, B est fixé à ready-state.

J'ai pu voir comment quelque chose de proche de ce qui peut être fait simplement en ajoutant et en supprimant la classe ready-state à partir du bouton. Cependant, le problème est que l'utilisateur peut cliquer sur un bouton deux fois de suite, plus vite que la variable peut être définie, de sorte que cette tentative de verrouillage va échouer dans certaines circonstances.

Personne ne sait comment mettre en œuvre un verrou qui ne manquera pas d'en JavaScript?

  • Des réponses qui prennent en compte parallèle JS exécution (c'est à dire comme dans IE9) serait appréciée.
  • Donc, vous voulez arrêter temporairement le courant de la propagation de l'évènement jusqu'à ce que la propagation d'un événement précédent est terminé. Je ne pense pas que cela peut être fait. Vous pouvez faire ceci: permet d'annuler l'événement, puis le feu une autre lors de la manifestation précédente a fini de se propager.
  • J'ai seulement entendu dire IE9 essaie d'utiliser un dédié de base pour la compilation, rien au sujet de l'exécution en parallèle, pouvez-vous citer une source?
  • JavaScript est mono-thread en dehors de des web workers. Web les travailleurs ne devrait pas exiger un verrouillage de la solution à mettre en place.
  • Chakra moteur interprète, compile et exécute le code en parallèle et profite de plusieurs cœurs de PROCESSEUR, lorsqu'il est disponible." -- msdn.microsoft.com/en-us/ie/ff468705.aspx
  • Que peut signifier, comme vous le suggérez, parallèle au moteur de rendu, plutôt que parallèle à lui-même.
  • Connexes: stackoverflow.com/questions/6266868/...

InformationsquelleAutor smartcaveman | 2011-03-17
  1. 79

    Lock est une idée discutable en JS qui est destiné à être threadless et n'ayant pas besoin de la simultanéité de protection. Vous êtes à la recherche de combiner des appels sur l'exécution différée. Le modèle que j'ai suivi pour ce qui est de l'utilisation de rappels. Quelque chose comme ceci:

    var functionLock = false;
var functionCallbacks = [];
var lockingFunction = function (callback) {
    if (functionLock) {
        functionCallbacks.push(callback);
    } else {
        $.longRunning(function(response) {
             while(functionCallbacks.length){
                 var thisCallback = functionCallbacks.pop();
                 thisCallback(response);
             }
        });
    }
}

    Vous pouvez également mettre en place cette aide DOM écouteurs d'événement ou un pubsub solution.

    • pourriez-vous s'il vous plaît vous fournir de la documentation de référence en justifiant de votre déclaration que "le JS est destiné à être threadless et n'ayant pas besoin de la simultanéité de protection"? J'aimerais en lire plus à ce sujet.
    • +1 - étant Donné que Node.js (JavaScript serveur web) a été construit de manière à tirer avantage de JavaScript solitaire-le fil et le mécanisme de rappel, je serai d'accord que vous ne devez pas vous soucier de verrouillage d'une propriété qu'il n'y aura pas de condition de course.
    • Ce sujet de première fonction qui viennent en premier et devrait être poussé directement à la fonction de rappel de la file d'attente et tourner functionLock variable de vrai?
    • Ce que la bibliothèque est de $.longRunning à partir de? Ce n'est pas dans (actuel) de jQuery.
    • lorsque functionLock censé être ensemble?
    • "JS qui est destiné à être threadless et n'ayant pas besoin de la simultanéité" est douteuse. JS ne pas utiliser de préemption de la simultanéité, mais ne vous permet pas d'utiliser coopérative de la concurrence (rappel ou async/await base). Vous pouvez certainement avoir des conditions de course lors de l'utilisation de ceux-ci et souhaitez utiliser un mutex abstraction de les éviter.

    InformationsquelleAutor JoshRivers
  2. 28

    JavaScript est, avec très peu d' exceptions (XMLHttpRequest onreadystatechange gestionnaires dans certaines versions de Firefox) événement-boucle simultanées. Donc pas besoin de vous soucier de verrouillage dans ce cas.

    JavaScript a une simultanéité modèle basé sur une "boucle". Ce modèle est tout à fait différent du modèle dans d'autres langages comme le C ou le Java.

    ...

    Un runtime JavaScript contient un message de la file d'attente, qui est une liste de messages à traiter. Pour chaque message est associé à une fonction. Quand la pile est vide, un message est sorti de la file d'attente et traitées. Le traitement consiste à appeler la fonction associée (et donc la création d'un premier bloc de pile) Le traitement du message se termine lorsque la pile devient de nouveau vide.

    ...

    Chaque message est traité complètement, avant tout autre message est traité. Cela offre quelques belles propriétés de raisonnement au sujet de votre programme, y compris le fait que chaque fois qu'une fonction s'exécute, il ne peut être désamorcée, et se déroulera entièrement avant tout autre code fonctionne (et de modifier les données de la fonction manipule). , Ce qui diffère de C, par exemple, où si une fonction s'exécute dans un thread, il peut être arrêté à tout moment d'exécuter du code dans un autre thread.

    Un inconvénient de ce modèle est que si un message est trop long pour terminer, l'application web est incapable de traiter les interactions de l'utilisateur comme cliquez ou faites défiler. Le navigateur permet d'atténuer cette avec la "un script est trop long à exécuter" boîte de dialogue. Une bonne pratique à suivre est de faire le traitement de message court, et si possible de couper vers le bas d'un message en plusieurs messages.

    Plus de liens sur l'événement de la boucle de la concurrence, voir E

    • Et avec Web des Travailleurs(non threads UI) en javascript, chaque objet clones avant de les envoyer à un autre travailleur(thread) ou thread de l'INTERFACE utilisateur, puis l'objet ont différentes instances dans différents threads et chaque thread avoir été propriétaire de boucle d'événement et enfin je suis d'accord avec la réponse de Mike comme une réponse utile. Merci Mike.
    InformationsquelleAutor Mike Samuel
  3. 6

    Les verrous sont un concept nécessaire dans un environnement multi-thread système. Même avec les threads de travail, des messages sont envoyés par la valeur entre les travailleurs, de sorte que le verrouillage n'est pas nécessaire.

    Je soupçonne que vous devez juste mettre un sémaphore (snr) entre vos boutons.

    InformationsquelleAutor James Westgate
  4. 6

    J'ai eu du succès mutex-la promesse.

    Je suis d'accord avec les autres réponses que vous pourriez ne pas avoir besoin de verrouillage dans votre cas. Mais ce n'est pas vrai que l'on n'a jamais besoin de verrouillage en Javascript. Vous avez besoin de mutuelle exclusivité lors de l'accès à des ressources externes qui ne gèrent pas de simultanéité.

    • Merci chose nécessaire.
    InformationsquelleAutor Tim Scott
  5. 2

    Pourquoi ne pas vous désactivez le bouton et l'activer à la fin de l'événement?

    <input type="button" id="xx" onclick="checkEnableSubmit('true');yourFunction();">

<script type="text/javascript">

function checkEnableSubmit(status) {  
  document.getElementById("xx").disabled = status;
}

function yourFunction(){

//add your functionality

checkEnableSubmit('false');
}

</script>

    Codage heureux !!!

    InformationsquelleAutor Ravia
  6. 0

    Certains plus JoshRiver de répondre en fonction de mon cas;

    var functionCallbacks = [];
    var functionLock = false;
    var getData = function (url, callback) {
                   if (functionLock) {
                        functionCallbacks.push(callback);
                   } else {
                       functionLock = true;
                       functionCallbacks.push(callback);
                        $.getJSON(url, function (data) {
                            while (functionCallbacks.length) {
                                var thisCallback = functionCallbacks.pop();
                                thisCallback(data);
                            }
                            functionLock = false;
                        });
                    }
                };

//Usage
getData("api/orders",function(data){
    barChart(data);
});
getData("api/orders",function(data){
  lineChart(data);
});

    Il y aura un appel d'api et de ces deux fonction consommer même résultat.

    InformationsquelleAutor Kadir Can