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

Question

我对 JS 不太了解，我只是不明白为什么这不起作用！ 该代码使用 jquery 将脉动效果应用于我的一个 div 并永远运行，除非我用另一个函数停止它，但我无法弄清楚为什么我的第一段代码不会运行！

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"));

让它工作的唯一方法是我这样做

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

请注意，在第一个 sn-p 中，代码使用变量更有用，而第二个部分将选择器名称硬编码

Answer 1

不要在你的函数声明中使用var。只需使用：

function animate(x){

另外，您的第一个示例可能需要这样的东西：

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

演示： http://jsfiddle.net/XHKbC/

否则，原始的animate("#mydiv") 调用会立即执行（并且$(x) 可能找不到任何东西，因为DOM 还没有准备好）。 $(document).ready() 需要对函数的引用。你调用了一个函数。但这有点矫枉过正。只需使用：

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

但您必须更改您的函数，以便 setTimeout 也传递 x 的值：

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

演示： http://jsfiddle.net/XHKbC/2/

虽然它的代码/复杂一点，但我的第一个示例在我的第二个示例中并没有遇到问题（必须在 setTimeout 中传递 x）通过使用闭包。

更新：

看到你是如何使用这段代码的，我会这样设置：

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);
    };
}

并创建一个新的，例如：

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

然后您可以在其上调用.start() 和.stop()，并根据需要在不同元素上创建任意数量的Animater 对象。

演示： http://jsfiddle.net/K7bQC/3/

Answer 2

您的代码有两个问题：

省略变量：

function animate(x){

修改您的事件处理程序：

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

您需要交出一个函数引用（animate 或function(){}），如果您传递animate()，则不要立即运行您正在执行的代码。

现在，为了不丢失对您的 x 的引用，您还必须在超时时修改动画调用：

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

Answer 3

指定函数参数时不需要输入var。