setTimeout加倍

Question

我有两个带有启动和停止按钮的div我正在使用它作为计时器。我创建了一个json对象来存储一些时间变量和其他一些东西。当我点击开始时，计时器工作。我将对象的一个​​属性设置为等于超时函数current_job = jobs[current_job_id];然后current_job.t = setInterval(function(){...。

当我点击其他按钮之一时，两个setIntervals似乎加倍。我究竟做错了什么？在这里演示： http://codepen.io/EightArmsHQ/pen/2d60722bb802bd1c3da5fe42cbc15442

以下大部分代码：

var jobs = [];

$(".job").each(function(i){
    jobs[i] = {
        "start_time"    : false,
        "stop_time"     : false,
        "job_number"    : $(this).find("h1").text(),
        "time"          : 0,
        "chunk_id"      : false,
        "t"             : false,
    }
    $(this).attr('id', i);
})

$(".start_timer").click(function(){

    current_job_div = $(this).closest(".job");
    current_job_id = parseInt(current_job_div.attr("id"));
    current_job = jobs[current_job_id];


    current_job.t = setInterval(function(){
        current_job.time += 1;
        current_job_div.find(".time_spent").text(make_time(current_job.time));
    },1000);
});

$(".stop_timer").click(function(){

    current_job_div = $(this).closest(".job");
    current_job_id = parseInt(current_job_div.attr("id"));
    current_job = jobs[current_job_id];

    clearInterval(current_job.t);
});

Answer 1

Closures闭包闭包，请参见此处：http://ejohn.org/apps/learn/#48

代码的工作示例：http://codepen.io/anon/pen/hkEga

（编辑：^虽然你确实有一个错误 - 尝试多次按启动:)）

关键代码更改：

current_job.t = (function (current_job, current_job_div) {
    return setInterval(function(){
        current_job.time += 1;
      current_job_div.find(".time_spent").text(make_time(current_job.time));
      },1000);
  }(current_job, current_job_div));

Answer 2

问题在于使用全局变量。

因此，每次点击Start按钮时，都会更改相同的全局变量。

因此代码应该改为：

var current_job_div = $(this).closest(".job");
var current_job_id = parseInt(current_job_div.attr("id"));
var current_job = jobs[current_job_id];

即。创建局部变量而不是使用全局变量。