Question

我有这段代码。

$('#products-carousel .single-trending-list h3').text(function(_, txt) {
  return txt.length > 36 ? txt.substr(0, 36) + "..." : txt;
});

        <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>

控制台说：未捕获TypeError：无法读取属性'length' 未定义的。

如何在文档完全加载后，在输入字段中显示文字，而不是一次性显示字母，而不是整个文本？

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循环继续运行并且增加i，所以到时间setTimeout命中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

在输入字母中显示带延迟字母的文本

5 个答案: