时间戳

首页 > 解决方案 > 在一定时间后进行变量更改 HTML 5/JavaScript

javascript - 在一定时间后进行变量更改 HTML 5/JavaScript

问题描述

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

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>

但它不起作用。你能告诉我为什么它不起作用以及是否有更好的方法来做到这一点。

标签： javascripthtml

解决方案

几个问题。

https://www.w3schools.com/js/js_hoisting.asp
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
var i 和 var x 正在被提升，所以：

function Interval() {
  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，因此它们会使用 idi和x. DOMElement++ = NaN，并且 DOMElement.toString() 等于表示 DOM 元素内部名称的字符串。

我建议使用 let 和 const（它们具有更好的作用域和更少的意外行为机会，例如可以在循环闭包内部限定作用域）而不是 var，并养成确保使用 var、let、const 和计划在使用它们的任何地方故意保持变量的范围和声明。

<!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>

推荐阅读