javascript函数延迟不止一次

Question

I have coded here a function that would execute after 4 seconds but it would only wait 4 seconds once, because when i would trigger it again the second time the delay seems to not work anymore. Here is my sample code:

setTimeout(function sampleFunction() {
    alert("sample alert");
}, 4000);

my function is triggered by pressing a button. i want it to have a delay every time i press the button. I want to use this delay function more than once, but the delay only works once. How do I make it work more than once? Thanks in advance.

Here is the button that triggers it:

<a data-role="button" onClick="sampleFunction( )">Trigger Button</a>

Answer 1

Use setInterval instead of setTimeout . This will cause it to run every 4 seconds. If you need to stop it, you can use clearInterval to stop it. To do that, though, you need to save the return value of setInterval somewhere.

Edit: To trigger it based on a button click, you need to make sure you have an onclick handler ( $('#whatever_id').on('click', ...) if you're using jQuery). You can use this code:

btn = document.getElementById('mybutton');

btn.onclick = function() {
    setTimeout(function sampleFunction() {
        alert("sample alert");
    }, 200);
};

Working jsFiddle

Answer 2

UPDATE:

With the new inforamtion you provided, it sounds like you just need to set an event handler to the button:

document.getElementById('buttonId').addEventListener('click', function () {
    setTimeout(function() {
        alert('test');
    }, 4000);
}, false);

ORIGINAL:

Either use setInterval or use setTimeout (preferred).

var timer = setTimeout(function timerFn() {
    alert('test');
    timer = setTimeout(timerFn, 1000);
}, 1000);

Doing it with setTimeout ensures that the function is only called once in the timeout length.

If you use setInterval it is possible for callbacks to build up and all be executed one after the other. This is not the case with setTimeout.

Answer 3

You're calling the function, so it's executing. If you want the setTimeout, you'll need to call a function that contains it. Try this:

function sampleFunction() {
    setTimeout(function {
        alert("sample alert");
    }, 4000);
}