1. 首页
  2. 问题列表
  3. 在一定时间后更改变量HTML5/JavaScript
提问者：小点点

在一定时间后更改变量HTML5/JavaScript


我对web开发很陌生，所以如果我听起来很蠢，我很抱歉。 我试图在使用HTML5/JavaScript一段时间后对变量进行更改。 这是我用的代码

null

var myVar = setInterval(OnScreenVariables, 100);
var myVar = setInterval(Interval, 1000);

function Interval() {
  if (x == 1) {
    i++;
    if (i > 3) {
      var i = 1;
      var x = 0;
    }
  }
}

function OnScreenVariables() {
  document.getElementById("i").innerHTML = i;
  document.getElementById("x").innerHTML = x;
}
<p id="x">hi</p>
<p id="i">hi</p>
<div style="backgound-color:blue;" onclick="x=1;">press me</div>

null

但它不起作用。 你能告诉我为什么它不起作用吗？如果有更好的方法来做这件事。


共1个答案

匿名用户

几个问题。

https://www.w3schools.com/js/js_hoisting.asp
https://developer.mozilla.org/en-us/docs/glossary/hoisting
var i和var x正在挂起，因此:

function Interval() {
console.log(i,x)
  if (x == 1) {
    i++;
    if (i > 3) {
      var i = 1;
      var x = 0;
    }
  }
}

表现为

function Interval() {
  var i;
  var x;  // x is always undefined
  if (x == 1) {
    i++;   // undefined++ = NaN
    if (i > 3) {
      i = 1;
      x = 0;
    }
  }
}

修复后，运行脚本时不声明i和x，因此它们使用id为i和x的DOM元素。 domElement++=NaN，domElement.toString（）等于表示DOM元素内部名称的字符串。

我建议使用let和const（它们具有更好的作用域，发生意外行为的机会更少，并且可以在循环闭包的内部进行作用域限制）而不是var，并且养成这样的习惯:确保在使用var，let，const和plan时，在使用变量的任何地方都对它们进行刻意的作用域限制和声明。

null

<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
</head>

<body>
  <p id="x">hi</p>
  <p id="i">hi</p>
  <div style="backgound-color:blue;" onclick="x=1;">press me</div>
  <script>
    var myVar = setInterval(OnScreenVariables, 100);
    var myVar = setInterval(Interval, 1000);
    var i = 1, x = 0;

    function Interval() {
      console.log(i,x)
      if (x == 1) {
        i++;
        if (i > 3) {
          i = 1;
          x = 0;
        }
      }
    }

    function OnScreenVariables() {
      document.getElementById("i").innerHTML = i;
      document.getElementById("x").innerHTML = x;
    }
  </script>
</body>

</html>

相关问题