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

Question

嗨伙计们,我想知道为什么这段代码不起作用,我是新手javascript和玩它.当我把它放在onload函数中它不起作用,我不知道为什么.我在onload函数中有很多其他代码但是我已经删除了这个例子.无论如何,其他代码工作正常,但它只是这一点没有.

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);
}

}

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

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/