How to refresh/repaint (on screen) the text of an element in long time cycles in javascript?-CodePudding

There is code

<div id="mydiv"></div>

<script>
function longTimeFunction() {
  for (i = 0; i < 100000000; i  ) {
  //.do somethig
  }
}

function foo() {

  document.getElementById('mydiv').innerText = 'Start';
  console.log(document.getElementById('mydiv').innerText);
  longTimeFunction(); // call long time

  document.getElementById('mydiv').innerText = 'First call complete';
  console.log(document.getElementById('mydiv').innerText);
  longTimeFunction(); // call long time

  document.getElementById('mydiv').innerText = 'Second call complete';
  console.log(document.getElementById('mydiv').innerText);

}

foo();
</script>

In JSFiddle

The text is written to the console at the correct intervals.

The text in the div element does not change.

Is it possible to change the text of a div?

I tried changing the style. I tried changing the display to "none" and then via setTimeout back to "block". Tried to add a child element. Also through setTimeout.

No result.

CodePudding user response：

If the purpose of "longTimeFunction()" is to simply cause some delay- then I would suggest making foo() an async function and awaiting a promise from a setTimeout to cause an artificial delay.

async function foo(){
    console.log("foo called");
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log("This message appears 1000ms after the first!");
}

Here is an example of that:

    (async()=>{
        console.log("foo called");
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log("This message appears 1000ms after the first!");
    })();

You can expand this out into it's own helper function to make this easy to call whenever you need a delay:

function delay(timeInMS) {
    return new Promise(resolve => setTimeout(resolve, timeInMS));
}

async function foo(){
    // do some div stuff like your example
    await delay(2000) // wait for 2 seconds
    // do some more div stuff
    await delay(1000) // wait for 1 second
    // do the last div stuff
    

}

If you want longTimeFunction() to be called every x number of seconds, then simply invoke it inside of a setInverval

setInterval(someFunc,1000);

Here is an example of that:

setInterval(()=>console.log("This is printed every 2 seconds!"),2000);

CodePudding user response：

is this what you're trying to achieve?

function foo() {
  document.getElementById('mydiv').innerText = 'Start';
  console.log(document.getElementById('mydiv').innerText);

  setTimeout(() => {
    document.getElementById('mydiv').innerText = 'First call complete';
    console.log(document.getElementById('mydiv').innerText);

    setTimeout(() => {
      document.getElementById('mydiv').innerText = 'Second call complete';
      console.log(document.getElementById('mydiv').innerText);
    }, 1000);
  }, 1000);
}
foo();

<div id="mydiv"></div>