使用setInterval的好奇的CSS设置问题

Question

我正在尝试制作一个回文检查器，它会在重复时更改当前比较的字母。

基本上，callback会：

• r aceca r

• r a cec a r

• ra c e c ar

• rac e car

我的JS Bin表示比较的字母有时会变为绿色，但如果再次运行，则字母不会改变。为什么结果会有差异？它似乎有时会在Chrome中运行，更常见于FireFox，但它都是间歇性的。

代码（如果需要）（也可在JS Bin中找到）：

        var myInterval = null;
        var container = [];
        var i, j;
        var set = false;
        var firstLetter, lastLetter;

        $(document).ready(function(){
            $("#textBox").focus();
            $(document).click(function() {
                $("#textBox").focus();
            });
        });


        function pal (input) {
            var str = input.replace(/\s/g, '');
            var str2 = str.replace(/\W/g, '');

            if (checkPal(str2, 0, str2.length-1)) {
                $("#textBox").css({"color" : "green"});
                $("#response").html(input + " is a palindrome");
                $("#palindromeRun").html(input);
                $("#palindromeRun").lettering();
                if (set === false) {
                    callback(str2);
                    set = true;
                }
            }
            else {
                $("#textBox").css({"color" : "red"});
                $("#response").html(input + " is not a palindrome");
            }
            if (input.length <= 0) {
                $("#response").html("");
                $("#textBox").css({"color" : "black"});
            }

        }

        function checkPal (input, i, j) {
            if (input.length <= 1) {
                return false;
            }
            if (i === j || ((j-i) == 1 && input.charAt(i) === input.charAt(j))) {
                return true;
            }
            else {
                if (input.charAt(i).toLowerCase() === input.charAt(j).toLowerCase()) {
                    return checkPal(input, ++i, --j);
                }
                else {
                    return false;
                }
            }       
        }

        function callback(input) {
            $("#palindromeRun span").each(function (i, v) {
                container.push(v);
            });
            i = 0;
            j = container.length - 1;

            myInterval = setInterval(function () {
                if (i === j || ((j-i) === 1 && input.charAt(i) === input.charAt(j))) {
                    set = false;
                    window.clearInterval(myInterval);
                    container = [];
                }
                console.log(i + ' : ' + j);
                $(container[i]).css({"color": "green"});
                $(container[j]).css({"color": "green"});
                i++; 
                j--;    
            }, 1000);
        }       

HTML：

    <input type="text" id="textBox" onkeyup="pal(this.value);"  value="" />
    <div id="response"></div>       
    <hr>
    <div id="palindromeRun"></div>

我直接在JSBin中粘贴了jsLettering代码，但如果需要，这里是CDN：

<script src="http://letteringjs.com/js/jquery.lettering-0.6.1.min.js"></script>

Answer 1

变化：

myInterval = setInterval(function () {
if (i === j) {
    set = false;
    window.clearInterval(myInterval);
    container = [];
}
console.log(i + ' : ' + j);

为：

myInterval = setInterval(function () {
if (i >= j) {//Changed to prevent infinite minus
    set = false;
    window.clearInterval(myInterval);
    container = [];
}
console.log(i + ' : ' + j);

demo