无法访问窗口变量

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>

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

Answer 1

因为window.smth是在回调中设置的，所以在设置间隔时会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>