Javascript 如何推/播放设置超时功能

我想给你看一个有点不同的时钟。下面给出的代码对我来说很好。但这次我想在用户需要的时候推送和播放。我想按下并恢复设置超时功能。有人知道怎么做吗

$（“#推”）。单击（函数（）{
});
$（“#播放”）。单击（函数（）{
show（）；
});
函数show（）{
var数字=新日期（）；
var time2=Digital.getTime（）；
var time1=1403517957984；
var diff=Math.abs（新日期（time2）-新日期（time1））；
var seconds=Math.floor（diff/1000）；//忽略任何小于1秒的剩余单位
var分钟=数学地板（秒/60）；
秒=秒%60；
var小时=数学楼层（分钟/60）；
分钟=分钟%60；
如果（小时<10）小时=0“+小时；
如果（分钟<10）分钟=“0”+分钟；
如果（秒<10）秒=“0”+秒；
$（“#工作时间”）.html（小时+”：“+分钟+”：“+秒）；
setTimeout（“show（）”，1000）；
}
show（）；

将句柄保存到变量：

var toHandle = null;

// start timeout
toHandle = setTimeout("show()", 1000);

然后，您可以随时使用以下工具取消超时：

// cancel timeout
if (toHandle) {
  clearTimeout(toHandle);
  toHandle = null;
}

---

又快又脏。使用if环绕您的show（显示）功能，该功能检查“我应该显示时间”标志：

var doShow=true；
$（“#推”）。单击（函数（）{
doShow=假；
});
$（“#播放”）。单击（函数（）{
doShow=true；
show（）；
});
函数show（）{
如果（doShow==true）{
var数字=新日期（）；
var time2=Digital.getTime（）；
var time1=1403517957984；
var diff=Math.abs（新日期（time2）-新日期（time1））；
var seconds=Math.floor（diff/1000）；//忽略任何小于1秒的剩余单位
var分钟=数学地板（秒/60）；
秒=秒%60；
var小时=数学楼层（分钟/60）；
分钟=分钟%60；
如果（小时<10）小时=0“+小时；
如果（分钟<10）分钟=“0”+分钟；
如果（秒<10）秒=“0”+秒；
$（“#工作时间”）.html（小时+”：“+分钟+”：“+秒）；
setTimeout（“show（）”，1000）；
}
}
show（）；

这是@colburton和@TwiStar响应的混合

正确地回答这个问题

var isPlaying = true;
var toHandle = null;

$("#push").click(function () {
    isPlaying = false;
    if (toHandle !== null)
    {
       clearTimeout(toHandle);
       toHandle = null;
    }
});

$("#play").click(function () {
    isPlaying = true;
    show();
});

function show() {
    if (isPlaying) {
        toHandle = null;
        var Digital = new Date();
        var time2 = Digital.getTime();
        var time1 = 1403517957984;
        var diff = Math.abs(new Date(time2) - new Date(time1));
        var seconds = Math.floor(diff / 1000); //ignore any left over units smaller than a second
        var minutes = Math.floor(seconds / 60);
        seconds = seconds % 60;
        var hours = Math.floor(minutes / 60);
        minutes = minutes % 60;
        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;
        $('#worked_time').html(hours + ":" + minutes + ":" + seconds);

        toHandle = setTimeout("show()", 1000);
    }
}
show();

var isplay=true；
var-toHandle=null；
$（“#推”）。单击（函数（）{
isplay=false；
if（toHandle！==null）
{
clearTimeout（toHandle）；
toHandle=null；
}
});
$（“#播放”）。单击（函数（）{
isplay=true；
show（）；
});
函数show（）{
如果（显示）{
toHandle=null；
var数字=新日期（）；
var time2=Digital.getTime（）；
var time1=1403517957984；
var diff=Math.abs（新日期（time2）-新日期（time1））；
var seconds=Math.floor（diff/1000）；//忽略任何小于1秒的剩余单位
var分钟=数学地板（秒/60）；
秒=秒%60；
var小时=数学楼层（分钟/60）；
分钟=分钟%60；
如果（小时<10）小时=0“+小时；
如果（分钟<10）分钟=“0”+分钟；
如果（秒<10）秒=“0”+秒；
$（“#工作时间”）.html（小时+”：“+分钟+”：“+秒）；
toHandle=setTimeout（“show（）”，1000）；
}
}
show（）；

它不会停止上一次设置超时。但是如果函数（来自setTimeout）被执行，它将因为if-statement而什么也不做。想象一下，用户单击stop，然后单击start fast（内部1000时间）。setTimeout将触发两次，doShow将等于true。是啊。。。（相同）时间将显示两次。在我看来，这不是一个关键的错误。但是，如果您有一个更复杂的逻辑，必须执行两次才能解决此问题。只需一个小小的代码复查注释：setTimeout（“show（）”，1000）应该是setTimeout（show，1000），也可以是seconds=seconds%60->seconds%=60；

var doShow = true;
$("#push").click(function () {
    doShow = false;
});

$("#play").click(function () {
    doShow = true;
    show();
});

function show() {
  if(doShow == true) {


    var Digital = new Date();
    var time2 = Digital.getTime();
    var time1 = 1403517957984;
    var diff = Math.abs(new Date(time2) - new Date(time1));
    var seconds = Math.floor(diff / 1000); //ignore any left over units smaller than a second
    var minutes = Math.floor(seconds / 60);
    seconds = seconds % 60;
    var hours = Math.floor(minutes / 60);
    minutes = minutes % 60;
    if (hours < 10) hours = "0" + hours;
    if (minutes < 10) minutes = "0" + minutes;
    if (seconds < 10) seconds = "0" + seconds;
    $('#worked_time').html(hours + ":" + minutes + ":" + seconds);
    setTimeout("show()", 1000);

   }
}
show();

var isPlaying = true;
var toHandle = null;

$("#push").click(function () {
    isPlaying = false;
    if (toHandle !== null)
    {
       clearTimeout(toHandle);
       toHandle = null;
    }
});

$("#play").click(function () {
    isPlaying = true;
    show();
});

function show() {
    if (isPlaying) {
        toHandle = null;
        var Digital = new Date();
        var time2 = Digital.getTime();
        var time1 = 1403517957984;
        var diff = Math.abs(new Date(time2) - new Date(time1));
        var seconds = Math.floor(diff / 1000); //ignore any left over units smaller than a second
        var minutes = Math.floor(seconds / 60);
        seconds = seconds % 60;
        var hours = Math.floor(minutes / 60);
        minutes = minutes % 60;
        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;
        $('#worked_time').html(hours + ":" + minutes + ":" + seconds);

        toHandle = setTimeout("show()", 1000);
    }
}
show();