Reputation: 13
Tried to search for something like this and just could not find exactly what im after so sorry if this has been already answered somewhere.
I need to run a bit of code for a period of time, not after a period of time. Basically i want to display a random value from an array fast on the page and i want to this to keep showing for 1 minute and then stop.
The code below will only start after 3 seconds, and does not stop and im not sure how can i achieve this, so any help much appreciated.
var messages = ["Good!", "Great!", "Awesome!", "Super!", "Nice!"];
function getMessage() {
return messages[Math.floor(Math.random() * messages.length)];
}
setTimeout(function () { oneSecondFunction(); }, 3000);
function oneSecondFunction() {
$('#test').html(getMessage());
setTimeout('oneSecondFunction()', 100);
}
Thanks
Upvotes: 0
Views: 1313
Reputation: 1208
Try
var messages = ["Good!", "Great!", "Awesome!", "Super!", "Nice!"];
function getMessage() {
return messages[Math.floor(Math.random() * messages.length)];
}
var interval = null;
setTimeout(function() {
interval = setInterval(function() {
// Your code here
$("#test").html(getMessage());
}, 100);
//Stop the functions after 1 minute.
setTimeout(function() { clearInterval(interval); }, 60 * 1000);
}, 3000);
This will create an interval after 3 seconds, which will execute the code every 100ms for 1 minute.
Upvotes: 2
Reputation: 121
You shouldn't setTimeout from oneSecondFunction to achieve make a loop. Instead use the setInterval function and pass the function you want to call and how long you want to sleep to it. Then call clearInterval with the interval ID to stop it. Like this:
function getMessage() {
return messages[Math.floor(Math.random() * messages.length)];
}
function oneSecondFunction() {
$("#test").html(getMessage());
}
var intervalID = setInterval(oneSecondFunction, <Delay between runs in millis here>);
function stop() {
clearInterval(intervalID);
}
setTimeout(stop, 60000);
Upvotes: 0
Reputation: 234867
Set a second timeout for the end time that sets a flag and only reschedule oneSecondFunction
if the flag is not set:
var messages = ["Good!", "Great!", "Awesome!", "Super!", "Nice!"];
var stop = false;
function getMessage() {
return messages[Math.floor(Math.random() * messages.length)];
}
setTimeout(function () {
setTimeout(function () { stop = true; }, 60000); // one minute later
oneSecondFunction();
}, 3000);
function oneSecondFunction() {
$('#test').html(getMessage());
if (!stop) {
setTimeout('oneSecondFunction()', 100);
}
}
Upvotes: 2
Reputation: 5419
You only need to track how much time the function is running. Then you test if the time is over. Here's an exemple of how you can do it.
var messages = ["Good!", "Great!", "Awesome!", "Super!", "Nice!"],
interval = 100,
delay = 0;
function getMessage() {
return messages[Math.floor(Math.random() * messages.length)];
}
setTimeout(oneSecondFunction, 3000); // Less code is better.
function oneSecondFunction() {
$('#test').html(getMessage());
delay+= interval;
if (delay < (3 * 60 * 1000)) { // 3 minutes
setTimeout(oneSecondFunction, interval);
}
}
Upvotes: 1
Reputation: 437914
Keep track of how much time has passed since the first time the function ran, and when that period becomes larger than one minute simply do not renew the setTimeout
call.
For example:
var timeStarted;
function getMessage() {
return messages[Math.floor(Math.random() * messages.length)];
}
setTimeout(function () { oneSecondFunction(); }, 3000);
function oneSecondFunction() {
var now = Date.now();
timeStarted = timeStarted || now;
$('#test').html(getMessage());
if (now - timeStarted < 60000) {
setTimeout(oneSecondFunction, 100); // you can just write function's name
}
}
Upvotes: 1