[Solved] How do I keep function from being run multiple time

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
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

Post 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]
Last edited by TildeHash on Mon Jun 24, 2013 1:52 am, edited 1 time in total.
User avatar
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

Post 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:
User avatar
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

Post 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.
User avatar
twinedev
Forum Regular
Posts: 984
Joined: Tue Sep 28, 2010 11:41 am
Location: Columbus, Ohio

Re: How do I keep function from being run multiple times at

Post 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?
User avatar
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

Post 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.
Post Reply