5

カラーボックスに似たdiv、iframe、imgを作成して開くモーダルオブジェクトライブラリを作成しようとしています。私はこれを純粋なJavaScriptで行っているので、jQueryはお勧めしません。

問題は、ユーザーがvar myModal = new modal（options、width、height）を使用して新しいモーダルを作成するときに、モーダルがすでに存在するかどうかを確認し、閉じて、アニメーションを閉じるのを待ってから、作成を続行することです。新しいモーダル。私はすでにすべてを行うことができますが、古いモーダルがなくなるまで新しいモーダルを作成するのを待つのに問題があります。webkitTransisionEndとカスタムイベントの発生を認識していますが、それは問題ではありません。実際のコードは、古いモーダルが閉じられるまで待機し、残りの関数を終了し、正しいオブジェクトをユーザーに返すまで待つ必要があります。これが私が試したことのいくつかです：

  • アニメーションが終了するのを待ってから新しいモーダルを作成するtransisionEndリスナーを作成します。（これは機能しましたが、ネストされた関数になることを考えると、正しいオブジェクトを返すのは困難です）。
  • try、catchブロックを使用します。（これは私の目的では機能しませんでした）
  • 再帰関数を使用するのと同じものの無数のバリエーションを使用する

アイデアがあれば、気軽に投稿してください。私はたくさんのことを試しましたが、どうやら私がしなければならないことは1つではありません。ありがとう。

編集：

私はそれを理解することができました。私がしなければならなかったのは、transitionEndリスナーをすでに開いているモーダルにアタッチし、クラスの外部に追加の関数を作成して、同じコンストラクターでモーダルを呼び出すことだけでした。コードは次のようになります。

function create(options, width, height) {
    return new modal(options, width, height);
}

function modal(options, width, height) {
    if (modal != null) {
        modal.close();
        modal.addEventListener('webkitTransitionEnd', function() {
            create(options,width,height);
        });
    }
    return;
}
4

2 に答える 2

2

何らかの将来のイベントが発生するまで、コードを待機させることはできません (たとえば、現在の実行スレッドの実行を一時停止する)。Javascript は単にそれをサポートしていないか、そのように動作しません。のようないくつかのモーダル関数以外に、現在の実行スレッドをブロックする方法はありませんalert()。

できることは、コールバックを使用して、将来のイベントの呼び出しコードを通知することです。ただし、呼び出し元のコードはそのコールバックを登録し、すぐに返されて実行を継続するため、コールバックの実装を処理するように呼び出し元のコードを記述する必要があります。

ライブラリ内ですべての作業を行おうとしている場合は、それほど難しくありません。呼び出し元が新しいモーダルを作成するときは、既存のモーダル ダイアログを確認するだけです。いずれかが起動していない場合は、通常どおり続行します。1 つがアップしている場合は、コールバック通知を前のものに登録し、コンストラクターの内容を保存しますが、実際には新しいモーダル ダイアログを作成しません。次に、前のモーダル ダイアログが完了したことを示すためにコールバックが呼び出されると、新しいモーダルの配置が完了します。

これらのモーダル ダイアログがすべて独自に作成したものである場合は、それらに完了通知を実装して、それらが閉じられたときに、今完了したことをリスナーに通知できるようにする必要があります。閉じるのにアニメーションを使用していて、アニメーションが完了するまで閉じる通知を待ちたい場合は、それも実装できます。CSS3 アニメーションを使用している場合は、ご存知のように、transtionEnd イベントを使用して、アニメーションがいつ終了したかを知ることができます。また、アニメーションのタイミングを知っていて、ミリ秒の正確さを必要としない場合は、setTimeout()アニメーションがいつ完了するかを知るために a を使用することもできます。

于 2013-02-08T01:21:14.667 に答える
2 
var animationDuration = 1000;
setTimeout(function(){
    // Animation done!
}, animationDuration);
于 2013-02-08T01:46:59.563 に答える