Is there a Javascript function to make the code delay at the point that code run?

Question

Ok, I got this <button onclick="alert('1');setInterval(function(){},57000);alert('2');"> Show </button>

The delay didn't work.

setTimeout also didn't work.

How to fix it?

Possible duplicate of [time delay between 2 lines of code in javascript, not settimeout](http://stackoverflow.com/questions/3048724/time-delay-between-2-lines-of-code-in-javascript-not-settimeout) — Heretic Monkey, Apr 15 '16 at 19:35

Shomz · Accepted Answer · 2016-04-15T19:45:14.150

4

Put the alert inside the setInterval callback:

<button onclick="alert('1');setInterval(function(){alert('2');},57000);"> Show </button>

Simple extended version of your code:

var div = document.querySelector('div');

function myFunction(){
  div.textContent += '-'; 
  // beware, this code might crash your browser if left running
  // for a few (thousand) years!!!
}

<button onclick="setInterval(myFunction, 1000);"> Start Interval </button>
<div></div>

A properly styled version of the code above:

var div = document.getElementById('d');
var button = document.getElementById('b');

button.addEventListener('click', clickHandler);

function myFunction(){
  div.textContent += '-'; 
  // beware, this code might crash your browser if left running
  // for a few (thousand) years!!!
}

function clickHandler(){
  setInterval(myFunction, 1000);
}

<button id="b"> Start Interval </button>
<div id="d"></div>

edited Apr 15 '16 at 19:45

answered Apr 15 '16 at 19:30

Shomz

37,421
4
57
85

is there a way not to do it. Let make the code seperated – Tum Apr 15 '16 at 19:31
You can put all the other code inside a function, then just pass that function as a parameter to `setInterval`: `setInterval(myFunction, 57000);` – Shomz Apr 15 '16 at 19:32
Note that this would alert "2" every 57 seconds. Nothing against the answer, just for those looking for a delay rather than an repeating call. – Heretic Monkey Apr 15 '16 at 19:33
@MikeMcCaughan, yeah, I think OP is aware of the difference between intervals and timeouts, at least it seems so from the question. – Shomz Apr 15 '16 at 19:34
Can myFuntion(){x=1;}; ok? – Tum Apr 15 '16 at 19:46
Sure, you can put whatever you want in that function and you can name it however you want. I'm just showing you the principle. – Shomz Apr 15 '16 at 19:47
The problem is myFuntion(){x=1;}; finish so quickly so 500 or 500000 milliseconds are no different? Do you have a delayFunction that does not make it crash? – Tum Apr 15 '16 at 19:51
You're not doing something right then. For a one-time delay use `setTimeout` like you originally tried. – Shomz Apr 15 '16 at 19:52
alert('1'); setTimeout(delayFunction(),29000); alert('2'); will not work if delayFunction only has x=1; since it can run x=1 so quickly – Tum Apr 15 '16 at 19:56
Because you're calling the function, you need only to pass the function body as I wrote in my answer: `setTimeout(delayFunction,29000);` (note the brackets) – Shomz Apr 15 '16 at 19:57
Seem Div.textContent doesn't worjk int my browser? other simpler way? – Tum Apr 15 '16 at 20:10
I can't know without seeing the code, you probably have an error. – Shomz Apr 15 '16 at 20:11
– Tum Apr 15 '16 at 20:22
Can you copy that above code & run? it didn't work at all – Tum Apr 15 '16 at 20:22
Try jsfiddle to create the error. No need to keep my comments, see the dev console for errors. – Shomz Apr 15 '16 at 20:28
Read the console, you didn't assign the id to the button: https://jsfiddle.net/8bbwb3Lq/3/ – Shomz Apr 15 '16 at 20:35
the problem is that your code does not take the the delayTIme in **button onclick="setInterval(delayFunction(),3000);alert('2');setInterval(delayFunction(),3000);alert('2');"> run **; it only take the delayTIme in handler. and that does not meet the requirement – Tum Apr 15 '16 at 20:39
I have no requirements, and I didn't write how `setInterval` works. I've just shown you how to use it by answering your question. It will never work the way you described it. – Shomz Apr 15 '16 at 20:50

score 0 · Answer 2 · answered Apr 15 '16 at 19:44

Working Fiddle

JavaScript code runs synchronously, which means that each instruction is executed one after another. Let's take a look at your code:

alert('1');

setInterval(function(){
    //does nothing
}, 57000);

alert('2');

Now each line will execute one after the other, which means alert(1) will execute, then setInterval(...) and then alert(2). Your setInterval doesn't stop the other lines from executing.

If you want to have a delay on your code execution, you must consider having that code execute after your setInterval (I'm assuming you want to use setTimeout here) finishes.

Also, as a pro-top, you should separate your JavaScript code from your HTML. Let's consider the following:

<button id="myButton">Show</button>
...
<script>
// Get a reference to your button
var myButton = document.querySelector('#myButton');

// The code you want to execute after the given time
function executeLater(){
    alert(2);
}

// We attach an event listener to your button
myButton.addEventListener('click', function(){
    alert('1');
    setTimeout(executeLater, 2000);
});
</script>

what if you don't put alert('2') inside the myFunction?, if you do that it won't delay — Tum, Apr 15 '16 at 19:53
@Tum You must understand the synchronicity of JavaScript - simply having a `setTimeout` or `setInterval` alone will not block the code after it, so if you want code to execute at a later time you must use a callback — Nick Zuber, Apr 15 '16 at 19:55

Is there a Javascript function to make the code delay at the point that code run?

2 Answers2