使用setInterval奇怪的css设置问题

Question

我试图做一个回文检查，以改变当前的比较字母，因为它的递归。

​

​

从本质上说，callback可以做到：

• r aceca r
• a cec a r
• ra c e c ar
• rac e轿车

我的JS Bin显示，比较字母有时会变绿，但是如果再运行一次，字母就不会变。为什么结果是不同的？它有时在Chrome上运行，在FireFox中运行得更频繁，但都是间歇性的。

如果需要，可以使用代码(也可以在JS中找到)：

        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>

I直接将jsLettering代码粘贴到JSBin中，但如果需要，这里是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);

演示