Wait until flag true

Question

I have javascript function like this   function myFunction number         var x number                  more initializations       here need to wait until flag  true     while flag  false                          do something      The problem is that the javascript is stuck in the while and stuck my program  so my question is how can I wait in the middle of the function until flag is true without  busy-wait

User · Answer

For iterating over    each  objects and executing a longish-running operation  containing nested ajax sync calls  on each object    I first set a custom done false property on each    Then  in a recursive function  set each done true and continued using setTimeout   It s an operation meant to stop all other UI  show a progress bar and block all other use so I forgave myself for the sync calls    function start         GlobalProducts   getproductsfromsomewhere          each GlobalProducts  function index  product             product  done     false               DoProducts      function DoProducts         var doneProducts   Enumerable From GlobalProducts  Where    done    true   ToArray      linqjs        update progress bar here      var nextProduct   Enumerable From GlobalProducts  Where    done    false   First             if  nextProduct                nextProduct done   true              Me UploadProduct nextProduct id     does the long-running work              setTimeout Me UpdateProducts  500

User · Answer

Because javascript in a browser is single threaded  except for webworkers which aren t involved here  and one thread of javascript execution runs to completion before another can run  your statement   while flag  false       will simply run forever  or until the browser complains about a non-responsive javascript loop   the page will appear to be hung and no other javascript will ever get a chance to run  thus the flag s value can never be changed   For a little more explanation  Javascript is an event driven language   That means that it runs a piece of Javascript until it returns control back to the interpreter   Then  only when it returns back to the interpreter  Javascript gets the next event from the event queue and runs it   All things like timers and network events run through the event queue   So  when a timer fires or a network request arrives  it does not ever  interrupt  the currently running Javascript   Instead  an event gets put in the Javascript event queue and then  when the currently running Javascript finishes  the next event is pulled from the event queue and it gets its turn to run   So  when you do an infinite loop such as while flag  false      the currently running Javascript never finishes and thus the next event is never pulled from the event queue and thus the value of flag never gets changed   They key here is that Javascript is not interrupt driven   When a timer fires  it does not interrupt the currently running Javascript  run some other Javascript and then let the currently running Javascript continue   It just gets put in the event queue waiting until the currently running Javascript is done to get its turn to run     What you need to do is rethink how your code works and find a different way to trigger whatever code you want to run when the flag value changes   Javascript is designed as an event-driven language   So  what you need to do is figure out what events you can register an interest in so you can either listen for the event that might cause the flag to change and you can examine the flag on that event or you can trigger your own event from whatever code might change the flag or you can implement a callback function that whatever code changes that flag can call your callback whenever the piece of code responsible for changing the flag value would change it s value to true  it just calls the callback function and thus your code that wants to run when the flag gets set to true will get to run at the right time   This is much  much more efficient than trying to use some sort of timer to constantly check the flag value   function codeThatMightChangeFlag callback           do a bunch of stuff     if  condition happens to change flag value               call the callback to notify other code         callback

User · Answer

using non blocking javascript with EventTarget API  In my example  i need to wait for a callback before to use it  I have no idea when this callback is set  It can be before of after i need to execute it  And i can need to call it several time  everything async    x000D   x000D     bus to pass event x000D  const bus   new EventTarget    x000D   x000D     it s magic x000D  const waitForCallback   new Promise  resolve  reject    gt    x000D      bus addEventListener  initialized    event    gt    x000D          resolve event detail   x000D          x000D      x000D   x000D   x000D   x000D     LET S TEST IT   x000D   x000D   x000D     launch before callback has been set x000D  waitForCallback then  callback    gt    x000D      console log callback  world     x000D      x000D   x000D   x000D     async init x000D  setTimeout      gt    x000D      const callback    param    gt    return  hello   param toString        x000D      bus dispatchEvent new CustomEvent  initialized    detail  callback     x000D     500   x000D   x000D   x000D     launch after callback has been set x000D  setTimeout      gt    x000D      waitForCallback then  callback    gt    x000D          console log callback  my little pony     x000D          x000D     1000   x000D   x000D   x000D

User · Answer

If you are allowed to use  async await on your code  you can try this one   const waitFor   async  condFunc       gt  boolean    gt      return new Promise  resolve    gt        if  condFunc            resolve              else         setTimeout async      gt            await waitFor condFunc           resolve             100                   const myFunc   async      gt      await waitFor      gt   window as any  goahead     true     console log  hello world        myFunc      Demo here  https   stackblitz com edit typescript-bgtnhj file index ts  On the console  just copy paste  goahead   true

User · Answer

I took an approach along the lines of the callback solutions here  but tried to make it a bit more generic  The idea is you add functions that you need to execute after something changes to a queue  When the thing happens  you then loop through the queue  call the functions and empty the queue   Add function to queue   let  queue        const  addToQueue    funcToQ    gt         queue push funcToQ       Execute and flush the queue   const  runQueue        gt        if    queue      queue length            return              queue forEach queuedFunc   gt            queuedFunc                  queue           And when you invoke  addToQueue you ll want to wrap the callback    addToQueue      gt  methodYouWantToCallLater  lt pass any args here like you normally would gt       When you ve met the condition  call  runQueue    This was useful for me because I had several things that needed to wait on the same condition  And it decouples the detection of the condition from whatever needs to be executed when that condition is hit

User · Answer

ES6 with Async   Await    let meaningOfLife   false  async function waitForMeaningOfLife       while  true           if  meaningOfLife    console log 42   return            await null     prevents app from hanging        waitForMeaningOfLife    setTimeout     gt meaningOfLife true 420

User · Answer

I tried to used  Kiran approach like follow    checkFlag  function       var currentObject   this     if flag    false          setTimeout currentObject checkFlag  100         else           do something             framework that I am using force me to define functions this way   But without success because when execution come inside checkFlag function second time  this is not my object it is Window  So  I finished with code below  checkFlag  function         var worker   setInterval  function             if flag    true                                do something                 clearInterval  worker                     100

User · Answer

Modern solution using Promise  myFunction   in the original question can be modified as follows  async function myFunction number         var x number                  more initializations      await until     gt  flag    true                    do something      where until   is this utility function  function until conditionFunction       const poll   resolve   gt        if conditionFunction    resolve        else setTimeout     gt  poll resolve   400          return new Promise poll       Some references to async await and arrow functions are in a similar post  https   stackoverflow com a 52652681 209794

User · Answer

I solved this issue by implementing the method below  const waitUntil    condition    gt        return new Promise  resolve    gt            let interval   setInterval      gt                if   condition                      return                            clearInterval interval              resolve              100            Now  whenever you want to wait until a certain condition is met you can call it like this  await waitUntil      gt     your condition

User · Answer

With Ecma Script 2017 You can use async-await and while together to do that  And while will not crash or lock the program even variable never be true   x000D   x000D    First define some delay function which is called from async function x000D  function   delay   timer    x000D      return new Promise resolve   gt    x000D          timer   timer    2000  x000D          setTimeout function      x000D              resolve    x000D             timer   x000D          x000D     x000D   x000D    Then Declare Some Variable Global or In Scope x000D    Depends on you x000D  var flag   false  x000D   x000D    And define what ever you want with async fuction x000D  async function some     x000D      while   flag  x000D          await   delay   1000   x000D   x000D           code here because when Variable   true this function will x000D     x000D   x000D   x000D

User · Answer

x000D   x000D    function a callback   x000D  setTimeout function     x000D    console log  Hi I am order 1    x000D     3000   x000D      callback    x000D      x000D   x000D    function b callback   x000D  setTimeout function     x000D    console log  Hi I am order 2    x000D     2000   x000D       callback    x000D      x000D   x000D   x000D   x000D    function c callback   x000D  setTimeout function     x000D    console log  Hi I am order 3    x000D     1000   x000D       callback    x000D   x000D      x000D   x000D    x000D    function d callback   x000D    a function    x000D      b function    x000D         x000D        c callback   x000D         x000D          x000D       x000D        x000D     x000D     x000D    x000D  d      x000D   x000D   x000D  async function funa    x000D     x000D    var pr1 new Promise  res rej   gt   x000D       x000D     setTimeout     gt res  Hi4 I am order 1   3000  x000D           x000D       x000D     x000D     x000D     var pr2 new Promise  res rej   gt   x000D       x000D     setTimeout     gt res  Hi4 I am order 2   2000  x000D           x000D       x000D      x000D      var pr3 new Promise  res rej   gt   x000D       x000D     setTimeout     gt res  Hi4 I am order 3   1000  x000D           x000D       x000D   x000D                 x000D    var res1   await pr1  x000D    var res2   await pr2  x000D    var res3   await pr3  x000D    console log res1 res2 res3   x000D    console log res1   x000D     console log res2   x000D     console log res3   x000D   x000D       x000D      funa    x000D                 x000D   x000D   x000D  async function f1    x000D     x000D    await new Promise r  gt setTimeout r 3000   x000D       then     gt console log  Hi3 I am order 1    x000D      return 1                          x000D   x000D    x000D   x000D  async function f2    x000D     x000D    await new Promise r  gt setTimeout r 2000   x000D       then     gt console log  Hi3 I am order 2    x000D           return 2                     x000D   x000D    x000D   x000D  async function f3    x000D     x000D    await new Promise r  gt setTimeout r 1000   x000D       then     gt console log  Hi3 I am order 3    x000D          return 3                      x000D   x000D    x000D   x000D  async function finaloutput2 arr   x000D     x000D    return await Promise all  f3   f2   f1      x000D    x000D   x000D    f1   then f2   then f3      x000D    f3   then f2   then f1      x000D     x000D    finaloutput2    x000D   x000D    var pr1 new Promise f3  x000D   x000D   x000D   x000D   x000D   x000D   x000D   x000D  async function f    x000D    console log  makesure    x000D    var pr new Promise  res rej   gt   x000D    setTimeout function     x000D    console log  Hi2 I am order 1    x000D     3000   x000D        x000D       x000D     x000D    var result await pr  x000D    console log result   x000D    x000D   x000D      f     x000D   x000D  async function g    x000D    console log  makesure    x000D    var pr new Promise  res rej   gt   x000D    setTimeout function     x000D    console log  Hi2 I am order 2    x000D     2000   x000D        x000D       x000D     x000D    var result await pr  x000D    console log result   x000D    x000D     x000D     g     x000D   x000D  async function h    x000D    console log  makesure    x000D    var pr new Promise  res rej   gt   x000D    setTimeout function     x000D    console log  Hi2 I am order 3    x000D     1000   x000D        x000D       x000D     x000D    var result await pr  x000D    console log result   x000D    x000D   x000D  async function finaloutput arr   x000D     x000D    return await Promise all  f   g   h      x000D    x000D     x000D    finaloutput    x000D   x000D     h     x000D     x000D     x000D     x000D     x000D     x000D     x000D   x000D   x000D

User · Answer

Similar to Lightbeard s answer  I use the following approach  function sleep ms        return new Promise resolve   gt  setTimeout resolve  ms       async function until fn        while   fn              await sleep 0           async function myFunction number        let x   number                 more initialization      await until      gt  flag    true                   do something

User · Answer

Javascript is single threaded  hence the page blocking behaviour  You can use the deferred promise approach suggested by others  but the most basic way would be to use window setTimeout  E g   function checkFlag         if flag    false           window setTimeout checkFlag  100      this checks the flag every 100 milliseconds         else            do something           checkFlag      Here is a good tutorial with further explanation  Tutorial  EDIT  As others pointed out  the best way would be to re-structure your code to use callbacks  However  this answer should give you an idea how you can  simulate  an asynchronous behaviour with window setTimeout

User · Answer

function waitFor condition  callback        if  condition              console log  waiting            window setTimeout waitFor bind null  condition  callback   100      this checks the flag every 100 milliseconds         else           console log  done            callback              Use   waitFor      gt  window waitForMe       gt  console log  got you

User · Answer

Solution using Promise  async await and EventEmitter which allows to react immediate on flag change without any kind of loops at all  const EventEmitter   require  events     const bus   new EventEmitter    let lock   false   async function lockable         if  lock  await new Promise resolve   gt  bus once  unlocked   resolve                 lock   true         some logic         lock   false      bus emit  unlocked        EventEmitter is builtin in node  In browser you shall need to include it by your own  for example using this package  https   www npmjs com package eventemitter3

User · Answer

Inspired by jfriend00  this worked for me  x000D   x000D  const seconds   new Date       wait 5 seconds for flag to become true const waitTime   5 const extraSeconds   seconds setSeconds seconds getSeconds     waitTime   while  Date now    lt  extraSeconds         break when flag is false   if  flag     false  break    x000D   x000D   x000D

User · Answer

In my example  I log a new counter value every second    x000D   x000D  var promises arr       x000D  var new cntr val   0  x000D   x000D     fill array with promises x000D  for  let seconds   1  seconds  lt  10  seconds      x000D      new cntr val   new cntr val   5        count to 50 x000D      promises arr push new Promise function  resolve  reject    x000D             create two timeouts  one to work and one to resolve the promise x000D          setTimeout function cntr    x000D              console log cntr   x000D             seconds   1000  new cntr val         feed setTimeout the counter parameter x000D          setTimeout resolve  seconds   1000   x000D           x000D    x000D   x000D     wait for promises to finish x000D  Promise all promises arr  then function  values    x000D      console log  all promises have returned    x000D      x000D   x000D   x000D

User · Answer

there is a node package delay very easy to use  const delay   require  delay      async      gt        bar         await delay 100           Executed 100 milliseconds later     baz

User · Answer

Try avoid while loop as it could be blocking your code  use async and promises  Just wrote this library  https   www npmjs com package utilzed There is a function waitForTrue import utilzed from  utilzed   const checkCondition   async      gt         anything that you are polling for to be expecting to be true   const response   await callSomeExternalApi      return response success        this will waitForTrue checkCondition to be true    checkCondition will be called every 100ms const success   await utilzed waitForTrue 100  checkCondition  1000    if  success         Meaning checkCondition function returns true before 1000 ms   return        meaning after 1000ms the checkCondition returns false still    handle unsuccessful  quot poll for true quot

[javascript] Wait until flag=true

Examples related to javascript

Examples related to synchronization