1

我对 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);

请注意，在第一个片段中，代码使用变量更有用，而第二个片段的选择器名称是硬编码的

4

3 回答 3

8

不要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/

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

更新：

在向您展示如何使用此代码时，我将其设置如下：

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/

于 2013-04-23T15:10:34.237 回答
3

您的代码有两个问题：

省略变量：

function animate(x){

修改您的事件处理程序：

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

您需要交出一个函数引用（animate或者function(){}），而不是立即运行您正在执行的代码，如果您通过animate().

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

setTimeout(function () {
        animate(x);
    }, 10000);
于 2013-04-23T15:13:28.577 回答
1

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

于 2013-04-23T15:10:30.973 回答