Here's my problem, if I run the following code, all works as expected, but if I click the "Play" link multiple times really fast or Tap over to the link and hold Enter, the value of "width" increases really quickly, as if the function is running multiple times.
[text]<script type="text/javascript" language="javascript" charset="utf-8">
var timers = new Array();
function delayIncrease(control, element, width, frames, ms) {
var loopCount = 0;
var setWidth = 0;
// Animation loop
function play() {
if (loopCount < frames) {
setWidth -= width;
loopCount++;
} else {
setWidth = '-' + width;
loopCount = 1;
}
document.getElementById(element).innerHTML = setWidth;
timers[element] = true;
setTimeout(play, ms);
}
// Initiate animations
if (timers[element] == false || timers[element] == null) {
play();
} else {
timers[element] = false;
}
}
</script>
<a href="#" onclick="delayIncrease('play', 'test', 5, 20, 120); return false;">Play</a>
<span id="test"></span><br>
<a href="#" onclick="delayIncrease('play', 'test2', 5, 200, 120); return false;">Play</a>
<span id="test2"></span>[/text]
[Solved] How do I keep function from being run multiple time
Moderator: General Moderators
- TildeHash
- Forum Commoner
- Posts: 43
- Joined: Fri Jul 16, 2010 7:17 am
- Location: Apple Valley, California
[Solved] How do I keep function from being run multiple time
Last edited by TildeHash on Mon Jun 24, 2013 1:52 am, edited 1 time in total.
- Tiancris
- Forum Commoner
- Posts: 39
- Joined: Sun Jan 08, 2012 9:54 pm
- Location: Mar del Plata, Argentina
Re: How do I keep function from being run multiple times at
You could disable the button on the first click, and enable it again when all process is completed (if you need it enabled, of course). 
- TildeHash
- Forum Commoner
- Posts: 43
- Joined: Fri Jul 16, 2010 7:17 am
- Location: Apple Valley, California
Re: How do I keep function from being run multiple times at
Well, the function is actually ran on page load and/or by pressing a specific key.Tiancris wrote:You could disable the button on the first click, and enable it again when all process is completed (if you need it enabled, of course).
Re: How do I keep function from being run multiple times at
add a variable for status
Then you will also need to have code that resets delayStat back to 0 when it is determined that what it is supposed to do is done.
Also, why do you have the declaration of the Play function inside of another function?
Code: Select all
<script type="text/javascript" language="javascript" charset="utf-8">
var timers = new Array();
var delayStat = 0; // 0 = can be run
function delayIncrease(control, element, width, frames, ms) {
if (delayStat == 0) {
delayStat = 1; // Set it to anything other than zero
var loopCount = 0;
var setWidth = 0;
// Animation loop
function play() {
if (loopCount < frames) {
setWidth -= width;
loopCount++;
} else {
setWidth = '-' + width;
loopCount = 1;
}
document.getElementById(element).innerHTML = setWidth;
timers[element] = true;
setTimeout(play, ms);
}
// Initiate animations
if (timers[element] == false || timers[element] == null) {
play();
} else {
timers[element] = false;
}
} // END: if (delayStat==0)
}
</script>Also, why do you have the declaration of the Play function inside of another function?
- TildeHash
- Forum Commoner
- Posts: 43
- Joined: Fri Jul 16, 2010 7:17 am
- Location: Apple Valley, California
Re: How do I keep function from being run multiple times at
Thanks, your suggestion helped me fix it.twinedev wrote:add a variable for status
Then you will also need to have code that resets delayStat back to 0 when it is determined that what it is supposed to do is done.Code: Select all
<script type="text/javascript" language="javascript" charset="utf-8"> var timers = new Array(); var delayStat = 0; // 0 = can be run function delayIncrease(control, element, width, frames, ms) { if (delayStat == 0) { delayStat = 1; // Set it to anything other than zero var loopCount = 0; var setWidth = 0; // Animation loop function play() { if (loopCount < frames) { setWidth -= width; loopCount++; } else { setWidth = '-' + width; loopCount = 1; } document.getElementById(element).innerHTML = setWidth; timers[element] = true; setTimeout(play, ms); } // Initiate animations if (timers[element] == false || timers[element] == null) { play(); } else { timers[element] = false; } } // END: if (delayStat==0) } </script>
Also, why do you have the declaration of the Play function inside of another function?
I had to change this:
[text]if (timers[element] == false || timers[element] == null) {
play();
} else {
timers[element] = false;
}[/text]
To this:
[text]if (timers[element] == null) {
play();
}[/text]
I guess because setting the timers value to false when the value is true lets the function run again.
I'm pretty much using it as a loop, I run the function and then the function gets stuck in a loop until I run the "stop()" function.... why do you have the declaration of the Play function inside of another function?