Question

我为练习写了一个jQuery插件，应该像"Airport" by unwrongest一样工作。

如何操作的简短描述

获取某个元素的文本，遍历它。
对于找到的每个字符，迭代字母表，比较字母表中每个字符的字符...
...直到text-char = alphabet-char（或直到“alphabet”-array没有更多元素。
在比较时，请以一定的延迟更改实际文本。

因此，例如，在hi上使用插件会将单词从hi（start）更改为ai，bi，ci，[...]，ha，hb，hc，hd，[...]，hi，翻过它。同样，如果你不清楚我的意思，你可以查看链接。

问题

使用firebug检查控制台，它确实会更改目标文本 但它只是在到达结束时才会更新 。首先我认为它根本没有做任何事情，但是当我更改代码以将每个字符变成“A”（作为示例）时，它会在最后将文本更新为“AAAAAAAA”。但是，我需要插件才能在每次更改后更新它。

代码

(function( $ ){

  $.fn.myAirport = function() {
        var text = this.text();
        var length = text.length;
        var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "!", "?"];
        var possibilities = alphabet.length;

        function changeCharAt(string, index, char) {
            var length = string.length;
            if(index > length-1) return string;

            var before = string.substr(0,index);
            var after = string.substr(index+1);
            result = before + char + after;
            return result;
        }



        for (var i = 0; i < length; i++) {
            var letter = text[i];
            console.log("looking for: "+letter);

            for (var j = 0; j < possibilities; j++) {
                var test = alphabet[j];
                if (letter == test) {
                    console.log("Done, "+letter+" (letter # "+i+") is # "+j+" in the Alphabet-string");
                    j = possibilities;
                }
                else {}

                text = changeCharAt(text, i, test);
                $(this).text(text).delay(100);              
                console.log("Trying "+$(this).text());
            }
        }
  };
})( jQuery );

插件的调用方式如下：$("#element").myAirport();

Answer 1

浏览器倾向于等到更新前完成循环。而不是使用

 $(this).text(text).delay(100)

尝试使用setTimeout函数。

How do I make an HTML element repaint within a Javascript loop?

jQuery元素操作不会刷新元素

1 个答案: