Question

大家好，我想知道为什么这段代码不起作用，我是javascript的新手并且玩弄它。当我把它放在onload函数中它不起作用，我不知道为什么。我在onload函数中有很多其他代码但是我已经删除了这个例子。无论如何，其他代码工作正常，但它只是这一点没有。

＆＃13;

window.onload = function() {
var i, timer, divide;
i = 0;
divide = 100;

function start() {
    timer = self.setInterval("increment()", (1000 / divide)); 
}

function increment() {
    i++;
    document.getElementById("timer_out").innerHTML = (i / divide);
}

function stop() {
    clearInterval(timer);
    timer = null;
}

function reset() {
    stop();
    i = 0;
    document.getElementById("timer_out").innerHTML = (i / divide);
}

}

＆＃13;

<div>
    <span id="timer_out">0</span>
    </br>
    <input type="button" value="Start" onclick="start()"/>
    <input type="button" value="Stop" onclick="stop()"/>
    <input type="button" value="Reset" onclick="reset()"/>
</div>

＆＃13;

Answer 1

您需要在onload范围之外定义函数和变量，否则无法访问它们。

var i, timer, divide;
function start() {
    if(!timer) {
        timer = setInterval("increment()", (1000 / divide)); 
    }
}

function increment() {
    i++;
    document.getElementById("timer_out").innerHTML = (i / divide);
}

function stop() {
    clearInterval(timer);
    timer = null;
}

function reset() {
    stop();
    i = 0;
    document.getElementById("timer_out").innerHTML = (i / divide);
}
window.onload = function() {
    i = 0;
    divide = 100;
}

正如评论中所提到的，如果您多次单击“启动”，则还会出现一个错误，导致无法停止计时器。这是因为您创建了两个（或更多）计时器，但只引用了最后一个计时器。要解决此问题，请检查是否存在计时器的简单if语句就足够了。上面的代码已更新以显示此内容，以下是运行它的示例：http://jsfiddle.net/qPvT2/40/

Answer 2

问题：

从onxyz属性引用的函数必须是全局变量。你的函数不是全局的，因为它们是在你的onload处理程序中声明的。有些人会告诉你要将它们全局化，但有更好的答案。
onload几乎可以肯定，比您更喜欢这个代码才能运行。例如，它等待所有图像完全下载。
使用setTimeout / setInterval字符串通常不是一个好主意。
</br>是无效的HTML。在HTML中，br元素写为<br>。如果您愿意，也可以将其写为<br/>或<br />，但/在HTML中毫无意义。（它在XHTML中有意义。）
无需setTiemout / setInterval加self.前缀。它有效，因为它是一个默认的self全局，但它是不必要的。
如果您点击start两次，则会覆盖之前计时器的句柄，但无法将其停止。我们需要在开始之前致电stop。

请参阅评论，了解我如何解决以下问题。

没有jQuery（因为你标记了它，但似乎没有使用它）

＆＃13;

// This script is at the end of the HTML, just beofre the closing
// </body> tag, ands o all the elements defined by the HTML above it
// will be there and ready for us to handle. No need for `onload`.
// But we'll use a scoping function to avoid creating globals.
(function() {
  var i, timer, divide;

  // Hook up our buttons.
  // For a very simple thing like this, we can just assign to 
  // their onclick properties, but for anything more complicated
  // I'd use addEventListener (falling back to attachEvent if
  // the browser doesn't have addEventListener, to support obsolete
  // IE like IE8), but that's overkill for this small example.
  document.querySelector("input[value=Start]").onclick = start;
  document.querySelector("input[value=Stop]").onclick = stop;
  document.querySelector("input[value=Reset]").onclick = reset;
  
  i = 0;
  divide = 100;
  timer = 0; // A value we can safely pass to clearInterval
             // if we never set anything else

  function start() {
    // Make sure to stop any previous timer
    stop();
    
    // Note no quotes or (), we're passing a reference to the
    // increment function into `setInterval`.
    // Also no need for `self.`
    timer = setInterval(increment, (1000 / divide));
  }

  function increment() {
    i++;
    document.getElementById("timer_out").innerHTML = (i / divide);
  }

  function stop() {
    clearInterval(timer);
    timer = null;
  }

  function reset() {
    stop();
    i = 0;
    document.getElementById("timer_out").innerHTML = (i / divide);
  }

})();

＆＃13;

<div>
  <span id="timer_out">0</span>
  <br>
  <input type="button" value="Start" />
  <input type="button" value="Stop" />
  <input type="button" value="Reset" />
</div>

＆＃13;

有关addEventListener / attachEvent的更多信息以及您可以使用的功能，如果您需要支持过时的浏览器see this answer。

使用jQuery（因为你确实标记了它）

＆＃13;

// This script is at the end of the HTML, just beofre the closing
// </body> tag, ands o all the elements defined by the HTML above it
// will be there and ready for us to handle. No need for `onload`.
// But we'll use a scoping function to avoid creating globals.
(function() {
  var i, timer, divide;

  // Hook up our buttons.
  $("input[value=Start]").on("click", start);
  $("input[value=Stop]").on("click", stop);
  $("input[value=Reset]").on("click", reset);
  
  i = 0;
  divide = 100;
  timer = 0; // A value we can safely pass to clearInterval
             // if we never set anything else

  function start() {
    // Make sure to stop any previous timer
    stop();
    
    // Note no quotes or (), we're passing a reference to the
    // increment function into `setInterval`.
    // Also no need for `self.`
    timer = setInterval(increment, (1000 / divide));
  }

  function increment() {
    i++;
    $("#timer_out").text(i / divide);
  }

  function stop() {
    clearInterval(timer);
    timer = null;
  }

  function reset() {
    stop();
    i = 0;
    $("#timer_out").text(i / divide);
  }

})();

＆＃13;

<div>
  <span id="timer_out">0</span>
  <br>
  <input type="button" value="Start" />
  <input type="button" value="Stop" />
  <input type="button" value="Reset" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 3

而不是在window.onload中编写你的函数..只需将它们写在它之外......当你在window.onload函数中编写它们时，它们是不可访问的...只需将它们写在外面，你的代码就会运行正常

Javascript代码没有在onload函数中运行

3 个答案:

没有jQuery（因为你标记了它，但似乎没有使用它）

使用jQuery（因为你确实标记了它）