控制宽度扩展onClick而setInterval,js,html5

时间:2015-06-24 21:53:24

标签: javascript html5 setinterval

我有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扩展两次,并且在第二次或更多次鼠标点击后清除明确间隔停止工作,当我点击更多时,只是继续提高扩展速度。

1 个答案:

答案 0 :(得分:0)

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

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