Question

在我点击触发计时器的按钮之前，我已经启动了一个正在运行的计时器。 Fiddle。 HTML：

<div id="worked">25:00</div>
<button type="button" onclick="update();">Start</button>

JavaScript的：

var $worked = $("#worked");

function update() {
    var myTime = $worked.html();
    var ss = myTime.split(":");
    var dt = new Date();
    dt.setHours(0);
    dt.setMinutes(ss[0]);
    dt.setSeconds(ss[1]);

    var dt2 = new Date(dt.valueOf() - 1000);
    var temp = dt2.toTimeString().split(" ");
    var ts = temp[0].split(":");

    $worked.html(ts[1]+":"+ts[2]);
    if (ts[1]==0 && ts[2]==0){
        return 0;
    }
    else{
        setTimeout(update, 1000);
    }
}
setTimeout(update, 1000);

Answer 1

这是因为你已经给出了最后一个陈述：

setTimeout(update, 1000);

这会在一秒钟内启动计时器。

Answer 2

从代码中删除最后一个setTimeout(update, 1000);，该代码在1秒后调用该函数

＆＃13;

var $worked = $("#worked");

function update() {
  var myTime = $worked.html();
  var ss = myTime.split(":");
  var dt = new Date();
  dt.setHours(0);
  dt.setMinutes(ss[0]);
  dt.setSeconds(ss[1]);

  var dt2 = new Date(dt.valueOf() - 1000);
  var temp = dt2.toTimeString().split(" ");
  var ts = temp[0].split(":");

  $worked.html(ts[1] + ":" + ts[2]);
  if (ts[1] == 0 && ts[2] == 0) {
    return 0;
  } else {
    setTimeout(update, 1000);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="worked">25:00</div>
<button type="button" onclick="update();">Start</button>

＆＃13;

Answer 3

它启动是因为无论是否单击按钮

，都在调用更新功能

Answer 4

这是因为在函数定义之后您还有setTimeout(update, 1000);的额外调用。这是在浏览器遇到它时执行的，因为它不属于某个函数，删除它并且它不会自动启动..另外一个建议是添加它：

$(document).ready(function() { $("button").click(update); });

从您的HTML中删除onclick="javascript:update();"。

这是纠正后的最终代码的样子：

＆＃13;

    var $worked = $("#worked");

    function update() {
        var myTime = $worked.html();
        var ss = myTime.split(":");
        var dt = new Date();
        dt.setHours(0);
        dt.setMinutes(ss[0]);
        dt.setSeconds(ss[1]);
        
        var dt2 = new Date(dt.valueOf() - 1000);
        var temp = dt2.toTimeString().split(" ");
        var ts = temp[0].split(":");
        
        $worked.html(ts[1]+":"+ts[2]);
        if (ts[1]==0 && ts[2]==0){
            return 0;
        }
        else{
            setTimeout(update, 1000);
        }
    }


$(document).ready(function() { $("button").click(update); });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="worked">25:00</div>
<button type="button">Start</button>

＆＃13;

更新：解释为什么通过javascript绑定点击事件比使用html中的onclick更好，请参阅：jQuery.click() vs onClick

为什么定时器会自动启动？

4 个答案: