如何將延遲併入每個循環的jQuery中？

Question

考慮以下功能：

$("document").ready(function(){ 
    var echoText = 'Hello world!'; 
    echoText = echoText.split(''); 
    $.each(echoText, function(key, value){ 
     $("#content").append(value); 
    }); 
}); 

這簡單重複輸入文本。然而，我想要做的是在每個字符之間添加一個延遲，因此它看起來就像是一個緩慢的人類輸入。任何想法如何繼續？我嘗試了谷歌搜索，但迄今爲止沒有任何幫助。

Answer 1

考慮使用setTimeout()功能：

$("document").ready(function(){ 
    var data = 'Hello world!'; 
    var lastIndex = 0; 

    var fnEcho = function() { 
     if (lastIndex < data.length) { 
      $("#content").append(data[lastIndex]); 
      lastIndex++; 

      window.setTimeout(fnEcho, 1000); 
     } 
    } 

    fnEcho(); 
}); 

Answer 2

$("document").ready(function(){ 
    var echoText = 'Hello world!'; 
    var currentChar = 0; 
    var intval = setInterval(function(){ 
     var value = echoText.charAt(currentChar); 
     $("#content").append(value); 
     currentChar++; 
     if(currentChar >= echoText.length){ 
      clearInterval(intval); 
     } 
    }, 10); 
}); 

我沒有測試過，所以它可能是越野車，但是這是要做到這一點。您可以增加10的值以減慢文本速度。

Answer 3

打字機插件

看

http://onehackoranother.com/projects/jquery/jquery-grab-bag/text-effects.html

使用IKE

$("#my-container").typewriter(); 

您可以從Here

$.fn.typewriter = function() { 
     this.each(function() { 
      var $ele = $(this), str = $ele.text(), progress = 0; 
      $ele.text(''); 
      var timer = setInterval(function() { 
       $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : '')); 
       if (progress >= str.length) clearInterval(timer); 
      }, 100); 
     }); 
     return this; 
    }; 

Answer 4

$("document").ready(function(){ 
    var echoText = 'Hello world!'; 
    echoText =echoText.split(''); 
    $.each(echoText, function(key, value){ 
    setTimeout(function(){ 
     $("#content").append(value); 
    }, key * 1000); 
    }); 
}); 

Answer 5

試試這個：

var printNextChar = function(theStr, pos){ 
    pos = (typeof(pos) == 'undefined') ? 0 : pos; 
    $('#content').append(theStr.substr(pos,1)); 
    ++pos; 
    if(pos <= theStr.length){ 
     setTimeout(function(){printNextChar(theStr,(pos));},300);  
    } 
} 

$("document").ready(function(){ 
    var echoText = 'Hello world!'; 
    printNextChar(echoText); 

}); 

jsFiddle example

Answer 6

下面是一個解決方案使用$.animate和step

function SimulateTyping(containerID, data) { 
    var dv = $('#' + containerID), len = data.length; 
    dv.text(""); 
    $({count: 0}).animate({count: len}, { 
     duration: len * 15, 
     step: function() { 
      dv.text(data.substring(0, Math.round(this.count))); 
     } 
    }); 
} 

這樣稱呼它

SimulateTyping("content", someText); 

演示：http://jsfiddle.net/naveen/JAxU9/