Question

嘿我现在正在通过建立一个时间倒计时练习jquery，你可以点击暂停或恢复。但是clearInterval（）不起作用。每当我点击圆圈时，它就会创建一个新的倒计时。我不知道为什么。

var status="pause";
var timeleft=1500;

$("#circle").click(function(){
    var timer;
    if(status==="pause"){
        status="start";
        alert(status);
         timer=setInterval(function(){
            $("#timer").text(Math.floor(timeleft/60)+":"+timeleft%60);      
            timeleft--;
        },1000);
    }
    else if(status==="start"){
        status="pause";
        alert(status);
        clearInterval(timer);
    }

});

Answer 1

您的计时器＆＃39;变量的作用域在单击处理程序中。这意味着每次都会创建一个新的。为了只保留一个，它应该在该处理程序之外作为范围。

Answer 2

timer变量需要位于父作用域中，因此它通过多次单击保留其值。 What is the scope of variables in JavaScript?

var status="pause";
var timeleft=1500;
var timer;  //<----changed scope

$("#circle").click(function(){
    if(status==="pause"){
        status="start";
        alert(status);
         timer=setInterval(function(){
            $("#timer").text(Math.floor(timeleft/60)+":"+timeleft%60);      
            timeleft--;
        },1000);
    }
    else if(status==="start"){
        status="pause";
        alert(status);
        clearInterval(timer);
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="circle">start</button>
<div id="timer"><div>

Javascript单击以切换启动/恢复fail.clearInterval不起作用

2 个答案: