2

js コードの一部で奇妙な動作が発生しています。

ページ上部のバーに表示され、一定時間後に消える通知がいくつかあります。これを達成するために単純なものを使用しましたsetTimeout()。

ページの読み込み時に特定の URL クエリ文字列の結果として通知が表示されることがありますが、ユーザーがボタンをクリックしたときに新しいものを表示する必要があります。古いものが消えて、新しいものが現れてほしい。setTimeout()キャンセルするために変数を使用して参照を保持しています。ただし、これを実行しようとすると、最終的にクロム タブがクラッシュするループが作成されます。

私の問題を説明するjsfiddleをまとめました - http://jsfiddle.net/5Nm4c/

別のものが表示されているときにクリックするとshow notification、ブラウザー タブがクラッシュします。何も表示されていない状態でクリックすればOKです。

これが私のjsです：

var Notification = {
    // close main notification bar
    close: function (callback) {
        $('#notification-bar').fadeOut(250, function () {
            // reset its position and fade it back in so it is ready to go again
            $(this).css('top', -100).fadeIn(1);
            // check if a callback function has been passed in
            if (typeof callback === 'function') {
                callback();
            }
        });
    },
    // open notification bar with the appropriate css class and message
    open: function (message) {
        // if the notification bar is already visisble
        if (verge.inViewport($('#notification-bar'))) {

            // hide and then show it with the new message
            window.clearTimeout(Notification.timeout);
            Notification.close(Notification.open(message));

            return false;
        }

        $('#notification-bar').html(message);

        $('#notification-bar').animate({
            'top': 0
        }, 250, function () {
            Notification.timeout = window.setTimeout(function () { Notification.close() }, 1500);
        });
    },
    timeout: null
}

Notification.open('hello');

$('#button').click(function(e){
    e.preventDefault();
    Notification.open('link clicked');
});

ビューポートに要素が表示されているかどうかを確認するためのいくつかの優れた方法があるため、https://github.com/ryanve/verge/を使用しています。

誰かが私のエラーがどこにあるのか教えてもらえますか?

4

1 に答える 1

1

エラーUncaught RangeError: Maximum call stack size exceededはjsfiddle自体に起因すると思われるため、テストできません。 あなたがそこで何をしたかわかる：

var Notification = {
open: function (message) {
Notification.close(Notification.open(message)); //Here you create the loop!!
}
}

あなたのコードに見られるもう 1 つの問題はNotification.open、アニメーションの実行中に呼び出されたときがNotification.timeout実際ではないということです。$('#notification-bar').stop(true, true);を呼び出す前に、実際のアニメーションを停止してみてくださいwindow.clearTimeout(Notification.timeout);。を使用する方が良いかもしれない$('#notification-bar').stop(true, false);ので、「古い」 setTimeout は呼び出されません。

于 2013-10-03T14:54:05.180 に答える