使用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>

我直接将jsLettering代码粘贴到JSBin中，但如果需要，这里是CDN链接： <script src="http://letteringjs.com/js/jquery.lettering-0.6.1.min.js"></script>

- user3871

---

请在此分享你的代码，这样未来访问 Stack Overflow 的用户就可以欣赏到它所有格式良好、缩进清晰的辉煌之处。 - Jay Blanchard

问题出现在这里：http://jsbin.com/huqudolu/13/edit - BuddhistBeast

@YuriyGalanter 我的意思是最终会实现，但不是一次性的。请参见上文。 - user3871

@BuddhistBeast 正确。问题就出在那里，可以看到。 - user3871

这似乎是一个极为罕见的情况...很有趣。顺便提一下，如果我输入单词“pap”并让它停留一秒钟，它就会变成绿色。 - BuddhistBeast

Answer 1

更改：

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

to:

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

演示

- Anima-t3d