javascript - 为什么无法清除间隔？

我不明白为什么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>

最佳答案

原因是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>