显示延迟字母输入字段中的文字

Question

我有这段代码片段。

 <div class="content__img-txt"> 
      <a class="input-group"> 
      <input class="input-group-field" type="text"> 
      <div class="input-group-button"> 
      <input type="submit" class="button" value="&raquo;"> 
      </div> 
     </div> 

---

function showLetter (field, text, delay) { 
     $(field).val(text.substring(0,1)); 
     for(var i = 2; i <= text.length; i++) 
     { 
      setTimeout(function(){ 
       $(field).val(text.substring(0,i)); 
      }, delay); 
     } 
    } 
showLetter (".input-group-field", "Show letter for letter with a delay of 1 second", 1000); 

The console says : Uncaught TypeError: Cannot read property 'length' of undefined.

如何显示在输入字段，但信字母文字，而不是整个文本同时显示，该文件完全加载后？

Answer 1

猜你需要一个封闭，以确保setTimeout的有自己的循环，你需要增加像以下延迟：

function showLetter(field, text, delay) { 
    $(field).val(text.substring(0, 1)); 
    for (var i = 2; i <= text.length; i++) { 
    (function(i) { 
     setTimeout(function() { 
      $(field).val(text.substring(0, i)); 
     }, (delay=delay+100)); 
    })(i) 

    } 
} 
showLetter(".input-group-field", "Show letter for letter with a delay of 1 second", 1000); 

DEMO

Answer 2

您应该使用setInterval代替。

function showLetter(field, text, delay) { 
 
    $(field).val(text.substring(0, 1)); 
 
    var interval = setInterval(function() { 
 
    var len = ($(field).val().length || 0) +1; 
 
    $(field).val(text.substring(0, len)); 
 
    
 
    if(len === text.length) 
 
     window.clearInterval(interval); 
 
    }, delay); 
 
} 
 
showLetter(".input-group-field", "Show letter for letter with a delay of 1 second", 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="content__img-txt" style="float:left;margin-top:20px;"> 
 
    <a class="input-group"> 
 
    <input class="input-group-field" type="text"> 
 
    <div class="input-group-button"> 
 
     <input type="submit" class="button" value="&raquo;"> 
 
    </div> 
 
</div>

Answer 3

递归函数！

function showLetter (field, text, position, delay) { 
    if (position >= text.length) { 
     return false; 
    } 
    var current = text.substring(0,position); 
    setTimeout(function(){ 
    $(field).val(current+text[position]); 
    }, delay); 
    return showLetter(field,text,position+1,delay+1000) 
} 
showLetter (".input-group-field", "Show letter for letter with a delay of 1 second", 0, 1000); 

这样的乐趣！

如果你想知道为什么你的代码不能正常工作，这是因为for循环继续运行，并通过时间setTimeout命中增加i，所以，i == text.length和它给你整个字符串。

DEMO

Answer 4

我做了一些例子，我希望它可以帮助你。

$(document).ready(function() { 
 
    
 
    var TIME_OUT = 1000; 
 
    
 
    var showTextWithDelay = function(element, text) { 
 
    
 
    var lengthOfSubtext = 0; 
 
    var printer = setInterval(function() { 
 
     
 
     if (lengthOfSubtext >= text.length) { 
 
     clearInterval(printer); 
 
     } 
 
     
 
     var subtext = text.substring (0, lengthOfSubtext); 
 
     element.val(subtext); 
 
     lengthOfSubtext++; 
 
     
 
    }, TIME_OUT); 
 
     
 
    }; 
 
        
 
    
 
    var inputElement = $('#field'); 
 
    var text = "This is an example!"; 
 

 

 
    showTextWithDelay(inputElement, text); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 

 
<input type="text" id="field">

Answer 5

要多一个加进来;）递归具有局部功能：

function showLetter(field, text, delay) { 
    var ind = 1; 
    var shownext =() => { 
    $(field).val(text.substring(0,ind));  
    if(ind++ < text.length) setTimeout(shownext,delay); 
    }; 
    shownext(); 
} 

Fiddle