0

わかりましたので、HTML要素のプロトタイプに(私が理解していることから)メソッドを追加するこのコードがあります:

HTMLElement.prototype.fadeIn = function( seconds ) {

var self = this;
var miliseconds = seconds * 1000;
var hold = this.style.transition;
this.style.transition = "opacity " + seconds + "s ease";
this.style.opacity = 1;

setTimeout(
    function () {
        self.style.transition = hold;
        return self;
    },
miliseconds);

};

私の意図は、タイムアウトの終わりに、関数が HTMLElement のインスタンスを返すので、fadeIn 関数を別の関数と連鎖させることができるということです。

ただし、そうではなく、返されるものに対して console.log を実行すると、未定義であると表示されます。どうすればこれを行うことができるかについて、誰かアドバイスをいただけますか？

4

2 に答える 2

0

setTimeout()非同期操作です。関数の実行を「一時停止」しませんfadeIn()。メソッド.fadeIn()はすぐに戻り、その後タイマー操作が行われます。

selfコールバックから戻っても、setTimeout()何も役に立ちません。selfそれは、忠実に無視されるタイマーサブシステムの内臓に戻るだけです。

メソッドの最後に.fadeIn()a を追加するだけで、操作からの連鎖をサポートできます。return this;

HTMLElement.prototype.fadeIn = function( seconds ) {
    var self = this;
    var miliseconds = seconds * 1000;
    var hold = this.style.transition;
    this.style.transition = "opacity " + seconds + "s ease";
    this.style.opacity = 1;

    setTimeout(
        function () {
            self.style.transition = hold;
        }, miliseconds);
    return this;
};

ただし、フェード操作が実際にいつ完了するかについては何もわかりません。それを知りたい場合は、アニメーションの連鎖をサポートするために、メソッド (コールバックまたはプロミスまたはキュー) に別のものを設計する必要があります。

jQuery のようにアニメーション チェーンを実行しようとしている場合は、次のようにすることができます。

obj.fadeIn(5).fadeOut(5);

2 つのアニメーションが順番に発生すると、より複雑なシステムが必要になります。jQuery は、アニメーションが必ずしもすぐに実行されるわけではなく、その特定の DOM オブジェクトに固有のキューに追加されるアニメーション キューを使用します。その特定のオブジェクトのアニメーションが完了するたびに、そのキューを調べて、この同じオブジェクトを待っている別のアニメーションがあるかどうかを確認します。もしそうなら、それはそのアニメーションを開始します。

また、CSS3 アニメーションを使用していて、アニメーションがいつ完了するかを知る必要がある場合は、オブジェクトの transitionend イベントに登録する必要があります。

于 2015-03-22T00:36:52.340 に答える