谁能解释为什么这个JavaScript无法运行

Question

Im not very good wit JS and I just dont get why this wont work! The code uses jquery to apply the pulsate efect to one of my divs and run forever unless I stop it with another function, but I cannot figure our why my first piece of code wont run!

function animate(var x){
    // Do pulsate animation
    $(x).effect("pulsate", { times:4 }, 5000);
    // set timeout and recall after 10secs
    setTimeout(animate, 10000);
}
  $(document).ready(animate("#mydiv"));

Only way to get it working is for me to do this

function animate(){
    // Do pulsate animation
    $("#mydiv").effect("pulsate", { times:4 }, 5000);
    // set timeout and recall after 10secs
    setTimeout(animate, 10000);
}
  $(document).ready(animate);

Note that in the first snippet the code uses variables to be more useful and the second piece has the selectors name hardcoded

Answer 1

Don't use var in your function declaration. Just use:

function animate(x){

Also, you probably want something like this for your first example:

function animate(x){
    return function () {
        function animateInner() {
            $(x).effect("pulsate", { times:4 }, 5000);
            setTimeout(animateInner, 10000);
        }
        animateInner();
    };
}
$(document).ready(animate("#mydiv"));

DEMO: http://jsfiddle.net/XHKbC/

Otherwise, the original animate("#mydiv") call executes immediately (and $(x) probably won't find anything since the DOM isn't ready yet). $(document).ready() expects a reference to a function. You called a function instead. But that's all a little overkill. Just use:

$(document).ready(function () {
    animate("#mydiv");
});

but you'll have to change your function so the setTimeout passes the value of x as well:

function animate(x){
    // Do pulsate animation
    $(x).effect("pulsate", { times:4 }, 5000);
    // set timeout and recall after 10secs
    setTimeout(function () {
        animate(x);
    }, 10000);
}

DEMO: http://jsfiddle.net/XHKbC/2/

Although it's a little more code/complex, my first example doesn't suffer the problem in my second (having to pass x in the setTimeout ) by using a closure.

UPDATE:

Being shown how you are using this code, I'd set it up like this:

function Animater(target) {
    var self = this;
    var animateTO;
    var animateElement = target;

    function animate() {
        animateElement.effect("pulsate", { times:4 }, 5000);
        animateTO = setTimeout(animate, 10000);
    }

    self.start = function () {
        animate();
    };

    self.stop = function () {
        animateElement.finish();
        clearTimeout(animateTO);
    };
}

And create a new one like:

var mydivAnimater = new Animater($("#mydiv"));

You can then call .start() and .stop() on it, and you create any number of these Animater objects on different elements as you want.

DEMO: http://jsfiddle.net/K7bQC/3/

Answer 2

Your code has two issues:

omit the var:

function animate(x){

modify your event handler:

$(document).ready(function(){
   animate("#mydiv");
});

You need to hand over a function reference (either animate or function(){} ), not run the code right away which you are doing if you pass animate() .

Now to not lose the reference to your x you have to modify the animate call in the timeout too:

setTimeout(function () {
        animate(x);
    }, 10000);

Answer 3

指定功能参数时无需键入var 。