window.variable 无法访问

Question

我正在尝试创建一个网站，其中包含 ID 为“vid”的文本“游戏结束”，我希望它每 300 - 400 毫秒随机化大写和小写，并在重置回小写之前保持 40 毫秒. 这是我现在得到的代码：（我的Javascript不是很好）

 setInterval(function() { window.smth = Math.floor((Math.random() * 100) + 1) + 300; var elem = document.getElementById('vid'); elem.textContent = "game over"; setTimeout(function() { elem.textContent = elem.textContent.split('').map(function(v) { var chance = Math.round(Math.random()); return v = chance ? v.toUpperCase() : v.toLowerCase(); }).join(''); }, window.smth); }, window.smth + 40);

 <div id="vid"></div>

除了最后两行忽略“window.smth”外，一切正常。 我尝试了不同的设置“smth”的方法，但我找不到一种与其他代码循环并且可以在我使用它的任何地方访问的方法。

Answer 1

因为window.smth是在回调中设置的，所以在设置interval的时候是undefined 。 即使您在第一次调用回调后定义smth ，它仍然不会工作，因为setInterval函数只被调用一次。

像这样创建间隔的方法是多次超时； 伪代码：

setTimeout(_ => {
  // do something

  setTimeout(..., otherTime) // you don't want to nest and nest and nest this, just create a function for this that's recursive
}, time)

Answer 2

您在第一个超时回调中声明window.smith ，但在实际调用回调之前使用它。 所以最后一行的window.smith当时实际上还undefined

尝试将window.smth定义从第一个回调中移出，如下所示：

window.smth = Math.floor((Math.random() * 100) + 1) + 300;
setInterval(function() {
  var elem = document.getElementById('vid');
  elem.textContent = "game over";
  setTimeout(function() {
    elem.textContent = elem.textContent.split('').map(function(v) {
      var chance = Math.round(Math.random());
      return v = chance ? v.toUpperCase() : v.toLowerCase();
    }).join('');
  }, window.smth);
}, window.smth + 40);

Answer 3

将smth从setInterval()放入另一个：

 var smth = 500; setInterval(function() {smth = Math.floor((Math.random() * 100) + 1) + 300;}, 250); setInterval(function() { var elem = document.getElementById('vid'); elem.textContent = "game over"; setTimeout(function() { elem.textContent = elem.textContent.split('').map(function(v) { var chance = Math.round(Math.random()); return v = chance ? v.toUpperCase() : v.toLowerCase(); }).join(''); }, smth); }, smth);

 <div id="vid"></div>