在setInterval，js，html5时控制宽度展开onClick

Question

我有 setInterval 问题。我做了一些类似于加载条的东西。当我单击鼠标时，我会扩展名为 loadBar1 的块的宽度

// here preset of interval and loadbar...
var interval = 0;
createLoadBar1 = function() {
loadBar1 = {
    // another stuff
    width:0,
};

document.onclick = function (mouse) {
    interval = setInterval(expandLoadBar1, 60);
}

借助此功能进行扩展：

function expandLoadBar1() {
    if(loadBar1.width < 60) {
        loadBar1.width++;
    }
    if (loadBar1.width >= 60) {
        loadBar1.width = 0;
        clearInterval(interval);
    }
}

上面很简单，当我单击一次时效果很好，但是当我通过鼠标单击多次单击时我开始遇到问题，这在逻辑上导致更快的 loadBar1.width 扩展两次并且在第二次或更多次鼠标单击后 clearInterval当我点击更多时，间隔停止工作并继续提高扩展速度。

Answer 1

您可能需要清除用户点击时的间隔：

document.onclick = function () {
  clearInterval(interval);
  interval = setInterval(expandLoadBar1, 60);
}