Question

我试图为不同的功能设置和清除不同的间隔以控制相同的元素
但有些东西不能正常工作：

var i = 0;
var myDiv = document.getElementById('myDiv');

function minus(){
    i--;
    myDiv.innerHTML = i;
}
function plus(){
    i++;
    myDiv.innerHTML = i;
}

var check = "xxx";

$('#buttonMinus').click(function() {
    if(check !== "MM"){
        clearInterval(plus);
        check = "MM";
    }
    MINUS = setInterval(minus, 500);
});

$('#buttonPlus').click(function() {
    if(check !== "PP"){
        clearInterval(minus);
        check = "PP";
    }
    PLUS = setInterval(plus, 500);
});

我做错了什么？

DEMO

Answer 1

Ypu应该将setInterval的结果发送到clearInterval，但你不是 - 你正在发送函数。

而不是：

clearInterval(plus);

做的：

clearInterval(PLUS);

和减号/减号相同。

您还需要先检查这些变量中是否有值。像这样：

var check = "xxx";
var PLUS = null;
var MINUS = null;

$('#buttonMinus').click(function() {
    if(check !== "MM"){
        if (PLUS) {
            clearInterval(PLUS);
        }
        check = "MM";
    }
    MINUS = setInterval(minus, 500);
});

$('#buttonPlus').click(function() {
    if(check !== "PP"){
        if (MINUS) {
            clearInterval(MINUS);
        }
        check = "PP";
    }
    PLUS = setInterval(plus, 500);
});

Answer 2

最后我找到了解决方案：
按钮现在仅在 PLUS 或 MINUS 为null时设置间隔（如果重复点击则没有问题）
然后将相反的 PLUS 或 MINUS 重置为null：

var i = 0;
var myDiv = document.getElementById('myDiv');

function minus(){
    i--;
    myDiv.innerHTML = i;
}
function plus(){
    i++;
    myDiv.innerHTML = i;
}

var PLUS = null;
var MINUS = null;

$('#buttonMinus').click(function() {
    if (PLUS) {
        clearInterval(PLUS);
        PLUS = null;
    }
    if(MINUS == null){
        MINUS = setInterval(minus, 500);
    }
});

$('#buttonPlus').click(function() {
    if (MINUS) {
        clearInterval(MINUS);
        MINUS = null;
    }
    if(PLUS == null){
        PLUS = setInterval(plus, 500);
    }
});

JSFiddle DEMO

非常感谢Chris Tavares的帮助！：）

javascript中同一元素上的多个区间和函数

2 个答案: