javascript - この JavaScript が実行されない理由を誰か説明できますか

Question

私はJSがあまり得意ではありません。なぜこれが機能しないのかわかりません! コードは jquery を使用して div の 1 つに脈動効果を適用し、別の関数で停止しない限り永久に実行されますが、最初のコードが実行されない理由がわかりません!

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

最初のスニペットでは、コードが変数を使用してより便利になり、2 番目の部分ではセレクター名がハードコーディングされていることに注意してください。

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/

もう少しコード/複雑ですが、クロージャーを使用することで、最初の例では 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()その後、それに対してandを呼び出すことができ、必要に応じてさまざまな要素.stop()にこれらのAnimaterオブジェクトをいくつでも作成できます。

デモ: http://jsfiddle.net/K7bQC/3/

Answer 2

関数パラメーターを指定するときにvarを入力する必要はありません。