175

I can't get the .delay method working in jQuery:

$.delay(3000); // not working
$(queue).delay(3000); // not working

I'm using a while loop to wait until an uncontrolled changing value is greater than or equal to another and I can't find any way to hault execution for X seconds.

Nahydrin
  • 13,197
  • 12
  • 59
  • 101

10 Answers10

278

You can also just delay some operation this way:

setTimeout(function (){
  
  // Something you want delayed.
            
}, 5000); // How long you want the delay to be, measured in milliseconds.
Inigo
  • 12,186
  • 5
  • 41
  • 70
Matt Sich
  • 3,905
  • 1
  • 22
  • 26
  • 10
    Just an FYI, this doesn't break the flow of execution, so if you need to "stop everything" for a few seconds, you're going to need something like what Niessner has posted. – Joshua Pinter Jan 10 '15 at 00:48
  • Yes... its a callback to the function and does not block. Thanks for the answer, it fixed my issue. – Bertus Kruger May 02 '15 at 20:46
  • if the frequency is extremely short and we expect this function to be running forever, will it eventually blow the stack? – Suicide Bunny Sep 18 '18 at 20:25
205

$.delay is used to delay animations in a queue, not halt execution.

Instead of using a while loop, you need to recursively call a method that performs the check every second using setTimeout:

var check = function(){
    if(condition){
        // run when condition is met
    }
    else {
        setTimeout(check, 1000); // check again in a second
    }
}

check();
Justin Niessner
  • 242,243
  • 40
  • 408
  • 536
39

ES6 setTimeout

setTimeout(() => {
  console.log("we waited 204586560000 ms to run this code, oh boy wowwoowee!");
}, 204586560000);

Edit: 204586560000 ms is the approximate time between the original question and this answer... assuming I calculated correctly.

thedanotto
  • 6,895
  • 5
  • 45
  • 43
23

If you are using ES6 features and you're in an async function, you can effectively halt the code execution for a certain time with this function:

const delay = millis => new Promise((resolve, reject) => {
  setTimeout(_ => resolve(), millis)
});

This is how you use it:

await delay(5000);

It will stall for the requested amount of milliseconds, but only if you're in an async function. Example below:

const myFunction = async function() {
  // first code block ...

  await delay(5000);

  // some more code, executed 5 seconds after the first code block finishes
}
Anthony De Smet
  • 2,265
  • 3
  • 17
  • 24
10

jQuery's delay function is meant to be used with effects and effect queues, see the delay docs and the example therein:

$('#foo').slideUp(300).delay(800).fadeIn(400);

If you want to observe a variable for changes, you could do something like

(function() {
    var observerInterval = setInterval(function() {
        if (/* check for changes here */) {
           clearInterval(observerInterval);
           // do something here
        }
    }, 1000);
})();
Julian D.
  • 5,464
  • 1
  • 25
  • 35
9

JavaScript setTimeout is a very good solution:

function funcx()
   {
   // your code here
   // break out here if needed
   setTimeout(funcx, 3000);
   }

funcx();

The delay function in jQuery is mostly used for delaying animations in a jQuery animation queue.

Jay Tomten
  • 1,657
  • 1
  • 14
  • 23
7

delay() doesn't halt the flow of code then re-run it. There's no practical way to do that in JavaScript. Everything has to be done with functions which take callbacks such as setTimeout which others have mentioned.

The purpose of jQuery's delay() is to make an animation queue wait before executing. So for example $(element).delay(3000).fadeIn(250); will make the element fade in after 3 seconds.

Nathan MacInnes
  • 11,033
  • 4
  • 35
  • 50
5
    function sleep(num) {
        let now = new Date();
        let stop = now.getTime() + num;
        while(true) {
            now = new Date();
            if(now.getTime() > stop) return;
        }
    }

    sleep(1000);   // 1 second 
    alert('here');

It gets the current time in milliseconds, adds num (which is a future time) where you've adding num many milliseconds to the current time.

An infinite while loop starts up checking the current time until the current time is later than the time we specified in the previous paragraph, once that has occurred the function stops running and execution continues to what ever is after this function call.

donkey
  • 478
  • 7
  • 10
  • Please provide some information about the answer so that future readers get more information from your answer. – Not A Bot Feb 24 '21 at 12:24
  • 2
    this approach uses CPU extremely hard, such sleep might cause the freeze of the webpage and users will not like it. Don't use it. – walv Mar 25 '22 at 14:38
5

Javascript is an asynchronous programming language so you can't stop the execution for a of time; the only way you can [pseudo]stop an execution is using setTimeout() that is not a delay but a "delayed function callback".

Tms91
  • 3,456
  • 6
  • 40
  • 74
Fabio Buda
  • 769
  • 2
  • 7
  • 16
  • ...and in case you are interested in this "sleep" use of `setTimeout()`, you might want to take a look to this thread https://stackoverflow.com/a/39914235/7658051 – Tms91 Mar 24 '22 at 14:28
4

Only javascript It will work without jQuery

<!DOCTYPE html>
<html>
    <head>
        <script>
            function sleep(miliseconds) {
                var currentTime = new Date().getTime();
                while (currentTime + miliseconds >= new Date().getTime()) {
                }
            }

            function hello() {
                sleep(5000);
                alert('Hello');
            }
            function hi() {
                sleep(10000);
                alert('Hi');
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="hello();">Say me hello after 5 seconds </a>
        <br>
        <a href="#" onclick="hi();">Say me hi after 10 seconds </a>


    </body>
</html>
Faruk Omar
  • 1,173
  • 2
  • 14
  • 22
  • 2
    Looping to wait in javascript is a bad idea! All javascript functionality will **stop** while the loop is running. This will have unanticipated side-effects. It's much better to use non-blocking functions like setTimeout(). – Kevin G. Jul 12 '16 at 20:26