Question

我正在尝试使用此代码从html元素创建倒计时器。但是我不希望2个计时器在同一元素上运行，所以我尝试创建一个2D Array存储setInterval函数及其相应的元素，以便我可以在同一个元素上设置另一个时可以clearInterval这是我试过但不起作用的代码（总是返回-1）

function formatTime(seconds) {
    var h = Math.floor(seconds / 3600),
        m = Math.floor(seconds / 60) % 60,
        s = seconds % 60;
    if (h < 10) h = "0" + h;
    if (m < 10) m = "0" + m;
    if (s < 10) s = "0" + s;
    return h + ":" + m + ":" + s;
}

var timers = new Array();
function timer(count, element) {
    var n = timers.indexOf(element);
    if (n > -1) {
        clearInterval(timers[n][1]);
    }

    timers.push([
        element, setInterval(function() {
            if (isNaN(count))
                return false;

            count--;
            if (count < 0) return clearInterval(interval);
            element.text(formatTime(count));
            return true;
        }, 1000)
    ]);
}

Answer 1

问题是你的timers数组不包含元素，而是包含元素和setInterval函数的数组。因此，timers.indexOf（element）将始终返回-1。除非您使用jQuery或类似的东西，否则您的元素需要具有id或具有唯一值的其他属性。假设它们都具有唯一的id，则必须使用以下内容替换计时器功能：

var timers = {};
function timer(count, element) {
    if(timer[element.id] != undefined) {
        clearInterval(timers[element.id]);
    }

    timers[element.id] = setInterval(function() {
        if (isNaN(count))
            return false;

        count--;
        if (count < 0) return clearInterval(interval);
        element.text(formatTime(count));
        return true;
    }, 1000);
}

假设你的元素是一个带有像getElementById这样的DOM元素。

Answer 2

您可以使用循环

搜索条目，而不是使用indexOf

function timer(count, element) {
    var match;
    for(var i = 0, l = timers.length; i < l;) {
        var entry = timers[i];
        if(entry.element === element) {
            timers.splice(i, 1);
        } else {
            i++;
        }
    }
    var entry = {
        element: element,
        timer: setInterval(function() {
            count--;
            if (isNaN(count) || count < 0) {
                var index = timers.indexOf(entry);
                if(index > -1) timers.splice(index, 1);
                return clearInterval(entry.timer);
            }
            element.text(formatTime(count));
            return true;
        }, 1000)
    };
    timers.push(entry);
}

Javascript使用2d数组

2 个答案: