Page 1 of 1
[Solved] How do I keep function from being run multiple time
Posted: Sun Jun 23, 2013 4:51 am
by TildeHash
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]
Re: How do I keep function from being run multiple times at
Posted: Sun Jun 23, 2013 11:39 am
by Tiancris
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
Posted: Sun Jun 23, 2013 9:32 pm
by TildeHash
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).

Well, the function is actually ran on page load and/or by pressing a specific key.
Re: How do I keep function from being run multiple times at
Posted: Mon Jun 24, 2013 1:02 am
by twinedev
add a variable for status
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>
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?
Re: How do I keep function from being run multiple times at
Posted: Mon Jun 24, 2013 1:51 am
by TildeHash
twinedev wrote:add a variable for status
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>
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?
Thanks, your suggestion helped me fix it.
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.
... why do you have the declaration of the Play function inside of another function?
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.