Question

我不明白为什么clearInterval不适合我。在区间中，我以表格格式显示2D数组，然后更新数组，并反复重复。

为什么clearInterval无效？

头脑中的JavaScript：

$(window).load(function () {
    var tabl = document.getElementById('ordersTable');
    var l = tabl.rows.length;
    var w = tabl.rows[0].cells.length;
    alert("Width:" + w);
    var array1 = new Array(l);
    var array2 = new Array(l);
    initialize();
    alert(JSON.stringify(array1));
    var st = setInterval(function () {
        display(array1);
        newArray();
        //alert(JSON.stringify(array1));
    }, 3000);

    function stopTime() {
        clearInterval(st);
    }

    function display(array) {
        for (var i = 0; i < l; i++) {
            for (var j = 0; j < w; j++) {
                var tr = tabl.rows[i];
                var cll = tr.cells[j];
                var ct = cll.innerHTML = array[i][j];
                if (array[i][j] == 1) {
                    $(cll).css("color", "red");
                } else {
                    $(cll).css("color", "black");
                }
                cll.id = array1[i][j];
            }
        }
    }

    function initialize() {
        for (var i = 0; i < l; i++) {
            array1[i] = new Array(w);
            array2[i] = new Array(w);
            for (var j = 0; j < w; j++) {
                var rand = Math.floor(Math.random() * 2);
                array1[i][j] = rand;
            }
        }
    }

    function newArray() {
        for (var i = 0; i < l; i++) {
            for (var j = 0; j < w; j++) {
                var rand = Math.floor(Math.random() * 2);
                array1[i][j] = rand;
            }
        }
    }
});

正文中的HTML：

<table id="ordersTable">
    <tr><td>Row 1</td><td> Row 1.2</td><td>Row 1.3</td></tr>
    <tr><td>Row 2</td><td> Row 2.2</td><td>Row 2.3 </td></tr>
    <tr><td>Row 3</td><td> Row 3.2 </td><td>Row 3.3</td></tr>
</table>

<button onclick="stopTime()">Stop</button>

Answer 1

原因是stopTime()不是全局函数，因此onclick="stopTime()"无法找到它。

要解决此问题，请将stopTime()函数和st变量移动到全局范围。

var st;

function stopTime() {
    clearInterval(st);
}

$(window).load(function () {
    //...
    st = setInterval(function () {
        display(array1);
        newArray();
        //alert(JSON.stringify(array1));
    }, 3000);

    // ...
});

或绑定onclick函数内的onload处理程序。

$(window).load(function () {
    //...
    var st = setInterval(function () {
        display(array1);
        newArray();
        //alert(JSON.stringify(array1));
    }, 3000);

    document.getElementById("my_button").onclick = function() {
        clearInterval(st);
    };

    //...
});

<table id="ordersTable">
    <tr><td>Row 1</td><td> Row 1.2</td><td>Row 1.3</td></tr>
    <tr><td>Row 2</td><td> Row 2.2</td><td>Row 2.3 </td></tr>
    <tr><td>Row 3</td><td> Row 3.2 </td><td>Row 3.3</td></tr>
</table>

<button id="my_button">Stop</button>

Answer 2

您可以通过动态附加侦听器并在闭包中保持对所需变量的引用来避免全局变量并解决问题，例如：

向按钮添加ID（或其他识别方法）：

<button type="button" id="stopButton">Stop</button>

从加载函数添加侦听器，如：

$(window).load(function () {

    function stopTime() {
        if (st) {
            clearInterval(st);
        }
    }
    var st = ...;

    ...

    $('#stopButton').click(function(){stopTime()})
});

为什么我不能清除间隔？

2 个答案: