Why is my interval time is not get cleared?

This is my function, I wrote this for moving m开发者_如何学Cy div from left to right. After iter reach 5, the interval has to stop. But now it is keep on running. My interval is not clearing, what is wrong with my function?

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

There is a weird behavior (bug?) in firefox that requires you to specify the second parameter of getComputedStyle to 'null'. Try:

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

It is likely that in your current case, the code is throwing an 'argument count' error in the timeout handler, which prevents further execution and thus, never clears the timeout.

Alternatively, you may want to do your loop counting at the start of your loop, as such:

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

I think it is because your var timerID is not defined at window's level

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

iter is global, so it will reach 5 for only one of multiple columns.

Try moving it into the function like this:

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

i have created a fiddle for this http://jsfiddle.net/DXSNp/