Question

我不是专业的jquery，但我只是制作了一个简单的代码来显示一个div，然后点击另一个div与10秒计时器。

这是我的代码：

$(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：第一次点击链接时，一切正常，但我需要只显示一次此计时器！在演示中你可以看到，每10秒后，如果你点击链接，计时器将启动并计数这样，-1，-2，-3，-4 ...我怎么能停止和禁用此计时器后10秒？我需要在10秒后禁用计时器。

2：我需要显示此计时器10秒，但如果你点击链接字3-4次，计时器将快速工作！我想我的问题是计时器速度！我不知道我怎么能解释这个问题，但你可以尝试在演示链接，只需点击链接4-5次，看看计时器！

和我的上一个问题，我不知道我的代码是否标准。我需要更改代码还是正确的？

感谢

Answer 1

我认为处理它的最简单方法就是使用one。由于您只希望触发此事件一次，因此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);
    });
});

Answer 2

您可以使用jQuery unbind()函数和原生JavaScript clearInterval函数。

演示：http://jsfiddle.net/SO_AMK/rzrez/1/

Answer 3

我只是编辑你的小提琴。

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。

（这不是规则，但我遵循这个以避免错误）。

停止重复设置定时器函数jQuery

3 个答案: