0

私はjqueryのプロではありませんが、10秒のタイマーで別のdivをクリックした後、divを表示する簡単なコードを作成しました。

これは私のコードです：

$(document).ready(function() {
    $('.link').click(function() {
    $('#my-timer').fadeIn('slow');
        var settimmer = 0;
        $(function(){
                setInterval(function() {
                    var timeCounter = $("b[id=show-time]").html();
                    var updateTime = eval(timeCounter)- eval(1);
                    $("b[id=show-time]").html(updateTime);

                    if(updateTime == 0){
                    $('#my-timer').hide(); 
                      $('.download').fadeIn('slow'); 
                    }
                }, 1000);           
});
});
        $(".download").hide();
        $("#my-timer").hide();
});

HTML：

<div class="link">Link</div>
<div class="download">Download</div>
<div style="display:none" id="my-timer">Page Will Redirect with in <b id="show-time">10</b> seconds<br />
</div>

デモ： http： //jsfiddle.net/vuJZX/

私の問題は：

1：初めてリンクをクリックすると、すべて問題ありませんが、このタイマーを1回だけ表示する必要があります。デモでは、10秒ごとに、[リンク]をクリックするとタイマーが開始され、次のようにカウントされます。-1、-2、-3、-4...10秒後にこのタイマーを停止して無効にする方法秒？10秒後にタイマーを無効にする必要があります。

2：このタイマーを10秒間表示する必要がありますが、リンクワードを3〜4回クリックすると、タイマーが高速に動作します。私の問題はタイマーの速度だと思います！この問題をどのように説明できるかわかりませんが、デモリンクで試すことができます。リンクを4〜5回クリックして、タイマーを確認してください。

そして私の最後の質問ですが、私のコードが標準であるかどうかはわかりません。コードを変更する必要がありますか、それとも正しいですか？

ありがとう

4

3 に答える 3

3

それを処理する最も簡単な方法は、を使用することだと思いますone。このイベントを1回だけ発生させたいのでone、最初のクリック後にハンドラーのバインドを解除します。

$('.link').one("click", function() {

clearIntervalまた、使用が終了したら、を使用して間隔を停止する必要があります。

関連する注記では、を使用しないでくださいeval。この場合はを使用parseIntするか、javascript変数で数値を維持する必要があります。

http://jsfiddle.net/vuJZX/3

$('.link').one("click", function() {
    $('#my-timer').fadeIn('slow');
    var settimmer = 0;
    var counter = 10;
    var interval = -1;
    $(function() {
        interval = setInterval(function() {
            var timeCounter = $("b[id=show-time]").html();
            $("b[id=show-time]").html(counter--);

            if (counter == 0) {
                $('#my-timer').hide();
                $('.download').fadeIn('slow');
                clearInterval(interval);
            }
        }, 1000);
    });
});
于 2012-09-16T03:10:18.850 に答える
1

jQueryunbind()関数とネイティブJavaScriptclearInterval関数を使用できます。

デモ： http： //jsfiddle.net/SO_AMK/rzrez/1/

于 2012-09-16T03:08:38.537 に答える
1

私はちょうどあなたのフィドルを編集しています。

var timeCounter = 10;
var istimerStart = false;

$(document).ready(function() {
  $('.link').click(function() {
    $('#my-timer').fadeIn('slow');

    $(function(){

        if(istimerStart == false){

           setInterval(function() {
              istimerStart = true;
                timeCounter = $("b[id=show-time]").html();
                var updateTime = eval(timeCounter)- eval(1);
                $("b[id=show-time]").html(updateTime);

                if(updateTime == 0){
                   $('#my-timer').hide();
                   $('.download').fadeIn('slow');
                }
            }, 1000);
         }
     });
    });
    $(".download").hide();
    $("#my-timer").hide();
});

http://jsfiddle.net/vuJZX/

あなたの間違い: リンクをクリックするたびに新しい間隔が開始されるので、フラグを設定します。

役に立たないアドバイス: タイマー関数は、別の関数を実行できる場合は document.ready に書き込まないでください。

（これはルールではありませんが、バグを避けるためにこれに従いました）。

于 2012-09-16T03:29:39.517 に答える