Javascript函数仅在Firefox上运行一次

Question

I have the following javascript function:

function kitemoving() {
    setInterval(function(){
        kite.animate({
            top: '+=30'
        },{ 
            duration: 1500 
        });
        kite.animate({
            top: '-=30'
        },{ 
            duration: 1500
        });
    });
}
kitemoving();

Here is the Fiddle

Everywhere it is working fine only on Mozilla Firefox all the movements with this code are being worked only once. Could you help me to understand why?

Answer 1

Don't use interval, you could easily saturate the fx queue. Instead, use any complete animation callback, eg:

var kite = jQuery('.kite');

function kitemoving() {
    kite.animate({
        top: '+=30'
    }, {
        duration: 1500
    });
    kite.animate({
        top: '-=30'
    }, {
        duration: 1500
    }).promise().done(kitemoving);
}
kitemoving();

-jsFiddle-

Answer 2

You have to specify a value for the delay parameter.

setInterval expects at least two parameters. Quoting from MDN

func is the function you want to be called repeatedly.

delay is the number of milliseconds (thousandths of a second) that the setInterval() function should wait before each call to func. As with setTimeout, there is a minimum delay enforced.

param1, param2, and so forth, are additional parameters that are passed through to the function specified by func.

Therefore when you omit the second parameter you can not expect a defined behaviour.

Answer 3

All you have to do in order to make your fiddle work in Firefox, is provide an interval amount to the setInterval call

setInterval(function(){
    ....
}, 3000);

Here is an updated fiddle, which works in Firefox: http://jsfiddle.net/wdodmvyu/5/

Answer 4

You did not specify an interval value that is why Gecko is struggling.

function kitemoving() {
    setInterval(function(){
        kite.animate({
            top: '+=30'
        },{ 
            duration: 1500 
        });
        kite.animate({
            top: '-=30'
        },{ 
            duration: 1500
        });
    },300);//interval
}
kitemoving();