jQuery 元素操作不会刷新元素答案

【问题标题】：jQuery element manipulation won't refresh the elementjQuery 元素操作不会刷新元素
【发布时间】：2012-04-17 11:23:47
【问题描述】：

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

应该如何操作的简短描述

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

例如，在 hi 上使用插件会将单词从 hi（开始）更改为 ai、bi、ci、[...]、ha、hb、hc、hd、[...]、hi、有点像翻阅它。同样，如果您不明白我的意思，您可以查看链接。

问题

用萤火虫检查控制台，它确实改变了目标文本，但它直到它到达结尾才更新。首先我认为它根本没有做任何事情，但是当我更改代码以将每个字符转换为“A”（例如）时，它会在最后将文本更新为“AAAAAAA”。不过，我需要插件做的当然是在每次更改后更新它。

代码

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

【问题讨论】：

我建议您浏览一下 Airport 插件源代码 jquery-airport.googlecode.com/files/…，看看您的代码与此有何不同，或者您是否想做一些与他们所做的不同的事情？
其实我根本不想用它。 ;) 这主要是练习。我也检查了代码并进行了比较，但没有发现明显的错误。另外，因为它应该是练习，我试图在我的代码中尽可能少地改变。毕竟，我想让我的工作！ :)
我理解，但看看他们的所作所为应该可以帮助您了解自己做得更好：看一个，做一个，教一个

标签： javascript jquery jquery-plugins refresh

【解决方案1】：

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

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

试试 setTimeout 函数。

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

【讨论】：