Question

我有3个函数，每秒都会增加某些值。

所以例如

var timberinterval = setInterval(function() {
        timber = timber + timbermodifier;           
        document.getElementById('timber').innerText = Math.floor(timber);                   
 }, 1000);
var sulphurinterval = setInterval(function() {
        sulphur = sulphur + sulphurmodifier;           
        document.getElementById('sulphur').innerText = Math.floor(sulphur);                     
 }, 1000);
var goldinterval = setInterval(function() {
        gold = gold + goldmodifier;           
        document.getElementById('gold').innerText = Math.floor(gold);                   
 }, 1000);

这些功能由3个独立的按钮控制。如您所见，每一秒函数都会由修饰符增加。

用户并非总是点击确切的秒，他们可能会在0.5秒或0.8秒时点击，然后我的功能开始不同步。

如何延迟执行函数以使其与其他函数同步？

Answer 1

获取当前毫秒：

var d = new Date();
var milli = d.getMilliseconds();

然后，您可以在setTimeout函数中调用setInterval函数：

setTimeout(function() { setInterval(function() { ... }, 1000); }, 1000-milli)

但是，如果你需要setInterval的返回值（例如清除间隔），我相信你必须使用promises。

Answer 2

<强> Working fiddle

我建议在同一setInterval内使用全局变量，以确保同步，如下面的代码段所示。

希望这有帮助。

点击示例开始

＆＃13;

var timbermodifier,sulphurmodifier,goldmodifier,timber,sulphur,gold;
timbermodifier = sulphurmodifier = goldmodifier = 1;
timber = sulphur = gold = 0;
timber_flag = sulphur_flag = gold_flag = false;

document.getElementById("timber-btn").addEventListener("click", function() {
  timber_flag = true;
});
document.getElementById("sulphur-btn").addEventListener("click", function() {
  sulphur_flag = true;
});
document.getElementById("gold-btn").addEventListener("click", function() {
  gold_flag = true;
});

var global_interval = setInterval(function() {
  if ( timber_flag ) {
    timber = timber + timbermodifier;
    document.getElementById('timber').innerText = Math.floor(timber);
  }

  if ( sulphur_flag ) {
    sulphur = sulphur + sulphurmodifier;
    document.getElementById('sulphur').innerText = Math.floor(sulphur);
  }

  if ( gold_flag ) {
    gold = gold + goldmodifier;
    document.getElementById('gold').innerText = Math.floor(gold);
  }
}, 1000);

//clearInterval(global_interval);

＆＃13;

<button id="timber-btn">Timber</button> <span id="timber"></span><br>
<button id="sulphur-btn">Sulphur</button> <span id="sulphur"></span><br>
<button id="gold-btn">Gold</button> <span id="gold"></span>

＆＃13;

切换＆＃39; stop/start＆＃39;点击示例：

＆＃13;

var timbermodifier,sulphurmodifier,goldmodifier;
var timber,sulphur,gold;
timbermodifier = sulphurmodifier = goldmodifier = 1;
timber = sulphur = gold = 0;
timber_flag = sulphur_flag = gold_flag = true;

document.getElementById("timber-btn").addEventListener("click", function() {
  timber_flag = timber_flag ? false : true;
});
document.getElementById("sulphur-btn").addEventListener("click", function() {
  sulphur_flag = sulphur_flag ? false : true;
});
document.getElementById("gold-btn").addEventListener("click", function() {
  gold_flag = gold_flag ? false : true;
});

var global_interval = setInterval(function() {
  if ( timber_flag ) {
    timber = timber + timbermodifier;
    document.getElementById('timber').innerText = Math.floor(timber);
  }

  if ( sulphur_flag ) {
    sulphur = sulphur + sulphurmodifier;
    document.getElementById('sulphur').innerText = Math.floor(sulphur);
  }

  if ( gold_flag ) {
    gold = gold + goldmodifier;
    document.getElementById('gold').innerText = Math.floor(gold);
  }
}, 1000);

//clearInterval(global_interval);

＆＃13;

<button id="timber-btn">Timber</button> <span id="timber"></span><br>
<button id="sulphur-btn">Sulphur</button> <span id="sulphur"></span><br>
<button id="gold-btn">Gold</button> <span id="gold"></span>

＆＃13;

Onclick函数在第二个执行

2 个答案: