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). :idea:

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). :idea:
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.