Question

这是我的功能，我写这个是为了从左到右移动我的div。 iter达到5后，间隔必须停止。但现在它继续运行。我的间隔没有清除，我的功能出了什么问题？

var mydiv = document.getElementById('news-variety');
var iter = 0;
if (mydiv) {
    var columns = mydiv.getElementsByTagName('DIV');

    function animeColumn(index, col) {
        var timerID = window.setInterval(function () {
            var current = window.getComputedStyle(col);
            var matrix = new WebKitCSSMatrix(current.webkitTransform);
            col.style.webkitTransform = matrix.translate(10, 0);
            if (iter++ == 5) {
                window.clearInterval(timerID);
            }
        }, 50);
    }

    for (var i = 0; i < columns.length; i++) {
        if (columns[i].className.toLowerCase() == "column") {
            columns[i];
            animeColumn(i, columns[i]);
        }
    }
}

Answer 1

firefox中有一个奇怪的行为（bug？），要求你将getComputedStyle的第二个参数指定为'null'。尝试：

var current = window.getComputedStyle(col,null);

在您当前的情况下，代码可能会在超时处理程序中抛出“参数计数”错误，这会阻止进一步执行，因此永远不会清除超时。

或者，您可能希望在循环的 start 处进行循环计数，如下所示：

function animeColumn(index, col) {
    var timerID = window.setInterval(function () {
        if (iter++ == 5) {
            window.clearInterval(timerID);
        }
        var current = window.getComputedStyle(col);
        var matrix = new WebKitCSSMatrix(current.webkitTransform);
        col.style.webkitTransform = matrix.translate(10, 0);
    }, 50);
}

Answer 2

我认为这是因为你的var timerID没有在窗口级别定义

 var mydiv = document.getElementById('news-variety');
 var iter = 0;
 var timerID;

if (mydiv) {
    var columns = mydiv.getElementsByTagName('DIV');

    function animeColumn(index, col) {
        timerID = window.setInterval(function () {
            var current = window.getComputedStyle(col);
            var matrix = new WebKitCSSMatrix(current.webkitTransform);
            col.style.webkitTransform = matrix.translate(10, 0);
            if (iter++ == 5) {
                window.clearInterval(timerID);
            }
        }, 50);
    }

    for (var i = 0; i < columns.length; i++) {
        if (columns[i].className.toLowerCase() == "column") {
            columns[i];
            animeColumn(i, columns[i]);
        }
    }
}

Answer 3

iter是全局的，因此只有多列中的一列才会达到5。

尝试将其移动到这样的函数中：

function animeColumn(index, col) {
    var iter = 0;
    var timerID = window.setInterval(function () {
        // ...
        if (iter++ == 5) {
            window.clearInterval(timerID);
        }
    }, 50);
}

Answer 4

我为这个http://jsfiddle.net/DXSNp/

创造了一个小提琴

为什么我的间隔时间没有被清除？

4 个答案: