time delay between 2 lines of code in javascript, not settimeout

Question

is there a function that would add a time delay between 2 lines of code. Not the settimeout, because settimeout requires a function/object in its arguments.

I am looking for something like this pseudo code

write "abc";
delay(500);
write "xyz";

TIA

Edit: jimr's solution in my other thread worked for my purpose, and so is Robusto's.

I am just wondering why the "sleep" methods given by Robusto and CMS's link are not preferred. How would that be different than the settimeout method since they both introduce a pause in the code? (settimeout pauses before the function is executed, the sleep method pauses before the next line is executed.)

Answer 1

The following is clunky and ugly and I would never do it in my own code and I DO NOT RECOMMEND IT AT ALL, but it shows that such a thing is possible.

// time arg is in milliseconds
function delay(time) {
  var d1 = new Date();
  var d2 = new Date();
  while (d2.valueOf() < d1.valueOf() + time) {
    d2 = new Date();
  }
}

Answer 2

You can use setTimeout so that it almost appears the code runs on two lines:

write('abc')
setTimeout(function() {
write('xyz')
},500)

Answer 3

A sleep-Method is not available because JavaScript execution blocks the browser, so a sleep-Method would block the browser for 500msec, do you really want to have your browser not responding for half an second?

Use setTimeout as suggested.

Answer 4

In JavaScript 1.7, using yield with async.js, you can do the following:

var yourFunction = _(function () {
    write("abc");
    yield to.sleep(.500);
    write("xyz");
});

Answer 5

I don't know what you're trying to do here, but here's one concrete reason for why a custom sleep may not work for your purposes assuming the browser freezing up is a non-issue for you.

Are you manipulating the DOM by any chance between those two write commands? If you are, then it simply will not work (as perceived by an end user), although the DOM nodes will be constructed/updated in memory, the display will not get updated as that part is not synchronous. The processor is locked up in that loop, and both the DOM updates will refresh on screen when that loop finishes. See this example.

Ideally, you should see "Hello", and after 5 seconds, "World" on the screen. However, on Chrome, Safari, and Firefox, you would see both "Hello" and "World" at the end of 5 seconds. The console logs prove that the DOM node is constructed in memory, but is not refreshed on screen until the end as you can see yourself.

Answer 6

As far as I know, setTimeout() is the only way to do it.

function write(out) {
  alert(out);
}

// ...

write('abc');
setTimeout(function() { write('xyz')}, 500);

Answer 7

ES6 Introduced async/await which can be used to have an actual delay. I have answered this in a different post, just updating here as well

An async function can contain an await expression that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

    async function delay(delayInms) {
      return new Promise(resolve  => {
        setTimeout(() => {
          resolve(2);
        }, delayInms);
      });
    }
    async function sample() {
      console.log('a');
      console.log('waiting...')
      let delayres = await delay(3000);
      console.log('b');
    }
    sample();

Answer 8

I miss that on javascript too, as a java SE and EE enthusiast not having my sleep() makes me disappointed with JavaScript, I made a timer and I hope it can be useful to you, it uses jQuery, and it's fairly simple, you can reverse engineer it and create something that meet your needs:

function timer(object, time) {
  $(object).attr({
    'onclick': ''
  });
  if (time < 0) {
    $(object).attr({
      'onclick': "timer('#clock', 6000);"
    });
    return;
  }
  $(object).animate({
    opacity: 1
  }, 1, function() {
    $(object).empty();
    $(object).append(time + 'ms');
    time--;
    timer(object, time);
  });
}

#clock {
  width: 65px;
  height: 20px;
  border: 1px solid #F00;
  text-align: center;
  line-height: 20px;
  background-color: #000;
  color: #FFF;
  font-weight: 900;
}

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>HTML5, CSS3 and JavaScript demo</title>
</head>

<body>
  <div id="clock" onclick="timer('#clock',6000);">--s</div>
</body>

</html>

Answer 9

setInterval(function delay{ //loops every 300 milliseconds
   setTimeout(function firstLineOfCode(){ //waits 100 milliseconds then runs code
      write('abc');
   },100)
   setTimeout(function secondLineOfCode(){ //waits 200 milliseconds (100 after previous line) then runs code
      write('def');
   },200)
   setTimeout(function thirdLineOfCode(){ //waits 300 milliseconds (100 after previous line) then runs code
      write('ghi');
   },300)
},300) //loops after total of delays in function delay()

Answer 10

You can add delay using async await concept in JavaScript.

const add2SecondsDelay = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('added 2 seconds delay);
    }, 20000);
  });
}

async function asyncFunctionCall() {

  console.log('abc'); // ------> first step
  const result = await add2SecondsDelay();
  console.log("xyz"); // ------> second step will execute after 2 seconds

}

asyncFunctionCall();