I am trying cycle through a series of images in an image control with a 300 millisecond pause inbetween image changes. I am using the following code:
for (i = 1; i <=10 i++){
tempObj.src = “images/” String(i) + “.png”
pause(300)
alert(“pause”)
}
where the pause function is as follows:
function pause(milliseconds) {
var dt = new Date();
while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}
Everything works great as long as I leave the alert(“pause”) line in. If I remove that though, there is a delay equal to 10 * 300 milliseconds and then the image controls takes on the final image, completely bypassing any of the inbetween images. Its almost as if the alert command gives the screen time to catchup. But this doesnt seem right…
Any ideas why this is working correctly? How can I fix it?
When the script is busy, the browser has no real opportunity in which to update things.
So instead, you can use setTimeout to trigger some script to run after some time has passed.
However, the question need to be asked, what are you wanting to achieve with this?
If it’s a slideshow that you don’t want any further interaction with, then we can go ahead with a custom scripted solution.
If you’ll want further slideshow functionality, it will be better to go with a pre-baked solution that has already been developed, tested, and proven to work across a wide range of web browsers.
Ok, I’ve decided to use setInterval and clearInterval instead.
I understand how to use these, aside from a couple points:
I declare the interval timer as follows:
var intervalTimer = setInterval(“someFunction()”, 1000)
but if I will be doing this many times throughout my code, can I just write
var intervalTimer
intervalTimer = setInterval(“someFunction()”, 1000)
intervalTimer = setInterval(“someFunction()”, 1000)
intervalTimer = setInterval(“someFunction()”, 1000)
etc.
The interval timer calls a function, ive called this someFunction above. I want to be able to cancel the interval timer from within this function. So I write clearInterval(intervalTimer) inside the function. But will this really work when the interval timer was declared in a different function? Perhaps I should first declared it globally?
The interval takes place at the time the setInterval function is called, so with the above, example, the last setInterval will overwrite the other ones that were assigned to the intervalTimer variable.
A technique that can work well is to use the delayed function to set a new interval for the next period when it should “wake up”.
By the way, doublequoting the interval function results in poor performance. Just use the function name instead.
intervalTimer = setInterval(someFunction, 1000);
I’m sure that you’re aware of the notion that globals are bad. There is another option available to you though.
The function that’s called will do stuff with elements on the page, perhaps a slideshow section. The element on the web page that you access via the identifier, you can also store data in the element itself.
var slideshow = document.getElementById('slideshow');
...
slideshow.timer = setInterval(..., ...);
That way you can late on access the slideshow, and cancel the vent via the timer property (which contains a reference to the setInterval).
var slideshow = document.getElementById('slideshow');
clearInterval(slideshow.timer);
I seem to have it working without quotes and with global variables… lol…
I am relatively new to all this. Why would you suggest not using global variables. Please excuse my ignorance.
The first time I read about how to use setInterval, quotes were used around the call function. These seemed really odd to me as it is inconsistent with other javascript syntax. So when you said no quotes I was a bit relieved. But after trying it, I found that no qoutes ends up generating an error the second time the function was called while with quotes it worked just fine. Can you shed any light on this?
Because while they remain as global variables, you run the risk of them being clobbered by other scripts that also run on the same page.
The first time I read about how to use setInterval, quotes were used around the call function. These seemed really odd to me as it is inconsistent with other javascript syntax. So when you said no quotes I was a bit relieved. But after trying it, I found that no qoutes ends up generating an error the second time the function was called while with quotes it worked just fine. Can you shed any light on this?
An example from you on how you have coded it will help to shed some light, and an example from me on its proper use might help as well.
in regards to the questions you so kindly answered earlier:
I am unfortunately using a lot of global variables. In the example you gave me before:
var slideshow = document.getElementById(‘slideshow’);
slideshow.timer = setInterval(…, …);
what is the element called slideshow? how do I create it?
Slideshow.timer becomes a variable?
perhaps the difference is that I need to send some variables to the function. I noticed in the link you sent me there is no () after the function. Here is how I’m doing it:
Where the function arguments are not global, you can use closure to retain those arguments, where you call one function with the arguments, which then returns a function that “remembers” those arguments from its parent’s scope.
function smoothRotation(sourceObj, rFinal) {
// sourceObj and rFinal are enclosed within this function
return function () {
// this returned function retains access to variables from its parent
smoothRotationReturn(sourceObj, rFinal, -1);
};
}
intervalTimer = setInterval(smoothRotationReturn(sourceObj, rFinal), smoothMoveInterval);