2

私はこのshowMessage関数を持っています:

関数 showMessage(メッセージ) {
    $('#my_message').show();
    $('#my_message').html(メッセージ);
    setTimeout(function(){$('#my_message').fadeOut();},
        2000);
}

ただし、setTimeout() および/または fadeOut() が完了する前に再度呼び出されると、正しく機能しません。すなわち。最初からやり直さず、2 秒待ちます。ご想像のとおり、少し途切れます。どうすればsetTimeoutとfadeOutをクリアして期待通りに動作させることができますか?

編集：

setTimeout() の代わりに jQuery delay() を使用することが提案されました。しかし、delay() が適切に機能するとは思いません (jQuery delay() doc ページでは、delay() をキャンセルできないと書かれています)。更新されたコードは次のとおりです。

$(document).ready(function() {
    $('#my_form').submit(関数() {
        $('#my_message').stop();
        $('#my_message').hide();

        $.get('/my_url',
            $('#my_form').serialize(),
            関数(データ) {
                showMessage(データ);
            });

        false を返します。
    });
});

関数 showMessage(メッセージ) {
    $('#my_message').html(メッセージ);
    $('#my_message').show();
    $('#my_message').delay(5000).fadeOut();
}

そのため、メッセージは 5 秒間表示されてから消えます。問題は、遅延がキャンセルされないことです。たとえば、フォームを 1 回送信してメッセージを表示し、4 秒待ってから再度送信すると、最初の遅延はまだ有効であるため、2 番目の遅延は 1 秒のように見えます。では、遅延が中断された場合でも、遅延を常に 5 秒にする方法を教えてください。使っstop(true)てstop('fx', true)みましたが、どちらも効果がないようでした。

4

2 に答える 2

14

絶対に使わないsetTimeoutでください。に変更しdelayます。

$('#form_message').delay(2000).fadeOut();

これにより、jquery のstop.

$('#form_message').stop();

stopは、アニメーションを終了するか、単に停止するかを決定できるオプションのパラメーターも受け取ります。

http://api.jquery.com/stop/

于 2012-09-30T23:26:02.230 に答える
1

元の質問に答えるには：

var messageTimeout;
function showMessage(message) {
    clearInterval(messageTimeout);
    $('#my_message').stop().html(message).fadeTo(100, 1);
    messageTimeout = setTimeout(function(){$('#my_message').fadeOut();}, 2000);
}
于 2012-10-01T00:49:21.470 に答える