How to implement a lock in JavaScript

Question

How could something equivalent to lock in C  be implemented in JavaScript   So  to explain what I m thinking a simple use case is    User clicks button B   B raises an onclick event   If B is in event-state the event waits for B to be in ready-state before propagating   If B is in ready-state  B is locked and is set to event-state  then the event propagates   When the event s propagation is complete  B is set to ready-state   I could see how something close to this could be done  simply by adding and removing the class ready-state from the button   However  the problem is that a user can click a button twice in a row faster than the variable can be set  so this attempt at a lock will fail in some circumstances   Does anyone know how to implement a lock that will not fail in JavaScript

User · Answer

Why don t you disable the button and enable it after you finish the event      lt input type  button  id  xx  onclick  checkEnableSubmit  true   yourFunction     gt    lt script type  text javascript  gt   function checkEnableSubmit status        document getElementById  xx   disabled   status     function yourFunction       add your functionality  checkEnableSubmit  false        lt  script gt    Happy coding

User · Answer

Locks still have uses in JS  In my experience I only needed to use locks to prevent spam clicking on elements making AJAX calls  If you have a loader set up for AJAX calls then this isn t required  as well as disabling the button after clicking   But either way here is what I used for locking  var LOCK INDEX       function LockCallback key  action  manual        if  LOCK INDEX key           return      LOCK INDEX key    true      action function      delete LOCK INDEX key          if   manual          delete LOCK INDEX key      Usage  Manual unlock  usually for XHR  LockCallback  someKey   delCallback    gt           do stuff     delCallback      Unlock method    true   Auto unlock LockCallback  someKey       gt           do stuff

User · Answer

Lock is a questionable idea in JS which is intended to be threadless and not needing concurrency protection  You re looking to combine calls on deferred execution  The pattern I follow for this is the use of callbacks  Something like this   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                                        You can also implement this using DOM event listeners or a pubsub solution

User · Answer

I ve had success mutex-promise   I agree with other answers that you might not need locking in your case  But it s not true that one never needs locking in Javascript  You need mutual exclusivity when accessing external resources that do not handle concurrency

User · Answer

Locks are a concept required in a multi-threaded system  Even with worker threads  messages are sent by value between workers so that locking is unnecessary   I suspect you need to just set a semaphore  flagging system  between your buttons

User · Answer

Here s a simple lock mechanism  implemented via closure  x000D   x000D  const createLock        gt         let lockStatus   false      const release        gt            lockStatus   false            const acuire        gt            if  lockStatus    true              return false         lockStatus   true         return true                return           lockStatus  lockStatus           acuire  acuire          release  release           lock   createLock      create a lock lock acuire      acuired a lock  if  lock acuire       console log  Was able to acuire      else     console log  Was not to acuire       This will execute    lock release      now the lock is released  if lock acuire       console log  Was able to acuire       This will execute   else     console log  Was not to acuire        lock release      Hey don t forget to release x000D   x000D   x000D

User · Answer

JavaScript is  with a very few exceptions  XMLHttpRequest onreadystatechange handlers in some versions of Firefox  event-loop concurrent   So you needn t worry about locking in this case   JavaScript has a concurrency model based on an  quot event loop quot   This model is quite different than the model in other languages like C or Java      A JavaScript runtime contains a message queue  which is a list of messages to be processed  To each message is associated a function  When the stack is empty  a message is taken out of the queue and processed  The processing consists of calling the associated function  and thus creating an initial stack frame  The message processing ends when the stack becomes empty again      Each message is processed completely before any other message is processed  This offers some nice properties when reasoning about your program  including the fact that whenever a function runs  it cannot be pre-empted and will run entirely before any other code runs  and can modify data the function manipulates   This differs from C  for instance  where if a function runs in a thread  it can be stopped at any point to run some other code in another thread  A downside of this model is that if a message takes too long to complete  the web application is unable to process user interactions like click or scroll  The browser mitigates this with the  quot a script is taking too long to run quot  dialog  A good practice to follow is to make message processing short and if possible cut down one message into several messages   For more links on event-loop concurrency  see E

User · Answer

Some addition to JoshRiver s answer according to my case   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         There will be just one api call and these two function will consume same result

[javascript] How to implement a lock in JavaScript

Examples related to javascript

Examples related to events

Examples related to locking

Examples related to dom-events

Examples related to deadlock