0

我不是 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 次并查看计时器！

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

谢谢

4

3 回答 3

3

我认为处理它的最简单方法就是使用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);
    });
});
于 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 回答