window.variable 无法访问

Question

I am trying to make a website where there is the text "game over" with the id "vid" and I want it to randomize the uppercase and lowercase every 300 - 400 milliseconds and to remain like that for 40 milliseconds before resetting back to lowercase. This is the code I got now: (My Javascript is not very good)

 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>

Everything works fine except the last 2 lines ignore "window.smth". I tried different ways of setting "smth" but I couldn't find a way that loops with the other code and can be accessed everywhere I use it.

Answer 1

Because window.smth is set in the callback, it's undefined when setting the interval. Even if you define smth after the first time the callback is called, it is still not going to work because the setInterval function is only called once.

The way to create an interval like this is multiple timeouts; pseudocode:

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

You're declaring window.smith inside your first timeout callback, but you're using it BEFORE the callback is actually called. So window.smith at last row is actually still undefined at that time

Try moving window.smth definition out of first callback like this:

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

Put smth out of the setInterval() and into another:

 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>