问题描述:

i am quite a newbie to JQuery. i got this code from somehere here at stack overflow where

the idea was to create a number animation in jquery.

Now the code worked fine for one number animation but as soon as i add the second animation with second script the first number dosen't animate. Is there a clash of functions??

thanks.

here is the Js script

<script>

$(function () {

var ele = $('#num1');

var clr = null;

var rand = 0;//Starting Point

(loop = function () {

clearTimeout(clr);

(inloop = function () {

ele.html(rand += 1);

if (!(rand % 60)) { //20 is the Finished Value

return;

}

clr = setTimeout(inloop, 32); //SPEED OF ANIMATION

})();

// setTimeout(loop, 2500); //Increment Loop TIme

})();

});

And the html

 <div id="num1"></div>

Now i add the second script with #num2 instead on #num1 and with a div num2. but the problem occurs. thanks. please help me. greatly appriciated.

网友答案:

Declare loop and inloop variables using var keyword to resolve this problem. This will make the variables local in scope as currently they are in global scope(as you are not using var).

$(function () {
var ele = $('#num1');
var clr = null;
var rand = 0;//Starting Point
var loop;
(loop = function () {
    var inloop;
    clearTimeout(clr);
    (inloop = function () {
        ele.html(rand += 1);
        if (!(rand % 60)) {  //20 is the Finished Value
            return;
        }
        clr = setTimeout(inloop, 32); //SPEED OF ANIMATION
    })();
    //  setTimeout(loop, 2500); //Increment Loop TIme
})();
});
网友答案:

Here's your code, only cleaned up a little bit and turned into a function so it can be used multiple times. I see several answers, but I think you can look at this and learn what you could have done differently to make the code clearer, easier to use, more reliable.

http://jsfiddle.net/6VHYT/7/

$(function () {
    // it is bad to copy/paste code, so lets put a function here
    function risingNumber(start,end,jqstr,speed){
        // speed is optional, others required
        var clr = null;
        var ele = $(jqstr);
        var rand = start;//Starting Point
        if (arguments.length<3) throw "risingNumber needs 3 params";
        // note new functions to replace potentially confusing use of inline
        // and use of var to make a local, not global
        function loop() {
            clearTimeout(clr);
            function inloop() {
                ele.html(rand += 1);
                if (!(rand < end)) {  //end is the Finished Value
                    return;
                }
                clr = setTimeout(inloop, (speed || 32)); //SPEED OF ANIMATION
            };
            inloop();
            //  setTimeout(loop, 2500); //Increment Loop TIme
        };
        loop();
    }
    risingNumber(0,60,'#num1');
    risingNumber(0,100,'#num2');

});
网友答案:

Here's a fiddle that might help you out: http://jsfiddle.net/gQeeR/

$(function () {
    function loop(selector) {
        var count = 0;
        var interval = setInterval(function() {
            $(selector).html(count++);
            if (!(count % 60))  {
                $(selector).html(count);
                clearInterval(interval);
            }
        }, 32);
    }
    loop('#num1');
    loop('#num2');
});
相关阅读:
Top