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;
            }
        }
    }
});

$（窗口）。加载（函数（）{
var tabl=document.getElementById（'ordersTable'）；
var l=表格行数长度；
var w=tabl.rows[0].cells.length；
警报（“宽度：+w”）；
var array1=新阵列（l）；
var array2=新数组（l）；
初始化（）；
警报（JSON.stringify（array1））；
var st=设置间隔（函数（）{
显示器（阵列1）；
newArray（）；
//警报（JSON.stringify（array1））；
}, 3000);
函数stopTime（）{
净间隔（st）；
}
功能显示（阵列）{
对于（变量i=0；i

正文中的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>

第1行第1.2行第1.3行
第2行第2.2行第2.3行
第3行第3.2行第3.3行
停止

原因是

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);

    // ...
});

---

或者在

onload

函数中绑定

onclick

处理程序

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

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

    //...
});

第1行第1.2行第1.3行
第2行第2.2行第2.3行
第3行第3.2行第3.3行
停止

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

将id添加到按钮（或用于标识它的其他方法）：

---

将Var st=''移动到$（窗口）.load（函数（）上方{@SLaks我对你的评论投了赞成票，但那只是一个糟糕的缩进——这不是一个变量problem@BenjaminGruenbaum谢谢你修复了这个索引！他会怎么修复它呢？哇，太快了。事实上，保持变量是局部的，但在加载闭包内设置点击处理程序是修复它的更好方法…使用全局变量/添加适当的变量与

窗口的连接不美观。
<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>

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

$(window).load(function () {

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

    ...

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