延迟 Javascript

Question

我正在开发 WordPress 插件。它的功能之一是通过 class 使用 <span> 隐藏和显示文本片段。

此功能有效，但我一直希望通过让文本片段一次显示一个字母（当然是很快）来增强它，就好像它们被快速打出一样，而不是一次全部输入大块。

我知道有针对此类内容的动画...也许这会是更好的解决方案，但我一直在努力保留它。但功能并不是真正的图形化或 "animation" 导向；我的目的只是让基于文本的功能看起来更漂亮。

我已经获得了逐个字符构建每个文本段的代码部分，但我试图在每个字符之间插入一个非常短（5-10 毫秒）的延迟，以便实际看到效果.我根本无法让 setTimeout 函数工作；谁能给我一些建议吗？

为简单起见，我只包括执行此操作的文本片段；让我知道是否需要更多上下文。以下是 FOR 循环，它遍历名为 cols[] 的数组的每个元素，并按字符显示数组中的每个元素。此代码有效，但从未观察到延迟。

numberofSnippets = the size of the array cols[]

  for (c = 0; c < numberofSnippets; c++)                
      {
          h=0;
         currentshown = '';                 
         snippet = cols[c].textContent;         
         sniplength = snippet.length;           

         (function addNextCharacter()  
        {   
            onecharacter = snippet.charAt(h);
                currentshown = currentshown.concat(onecharacter);
            cols[c].textContent = currentshown;
             h=h+1;
            if (h < sniplength) {window.setTimeout(addNextCharacter, 200); }

          })();*/


          }

    }    
}

Answer 1

好吧，一个问题是您将超时设置为 0，这实际上意味着 'next tick'。例如，如果你想要 5 秒的延迟，你需要将 5000 作为第二个参数放在那里。

Answer 2

您的代码中有一些奇怪的地方阻止了 setTimeout 按预期执行，这主要是由于闭包在循环中重用了变量，因为循环不会等待 IIFE使用 setTimeout 完成递归执行。我通过将这些变量移动到传递给 addNextCharacter 的参数来解决这个问题。

var cols = document.getElementsByClassName('foo');
var numberofSnippets = cols.length;

for (var c = 0; c < numberofSnippets; c++) {
  (function addNextCharacter(h, c, snippet, sniplength, currentshown) {
    var onecharacter = snippet.charAt(h);
    currentshown = currentshown.concat(onecharacter);
    cols[c].textContent = currentshown;
    h = h + 1;
    if (h < sniplength) {
      setTimeout(function () {
        addNextCharacter(h, c, snippet, sniplength, currentshown);
      }, 10);
    }
  })(0, c, cols[c].textContent, cols[c].textContent.length, '');
}

<div class="foo">Apple</div>
<div class="foo">Banana</div>
<div class="foo">Orange</div>
<p class="foo">There were a few oddities in your code that was preventing the setTimeout from performing as expected, mostly due to the closure reusing variables within the loop due to the fact that the loop isn't going to wait for the IIFE to finish recursively executing with a setTimeout. I solved that by moving those variables to parameters passed to addNextCharacter.</p>

这是强制性的 .forEach 版本，它避免了将变量作为参数传递的需要。

var cols = document.getElementsByClassName('foo');
var numberofSnippets = cols.length;

[].forEach.call(cols, function(el) {
  var snippet = el.textContent;
  var sniplength = snippet.length;
  var currentshown = '';
  (function addNextCharacter(h) {
    var onecharacter = snippet.charAt(h);
    currentshown = currentshown.concat(onecharacter);
    el.textContent = currentshown;
    h = h + 1;
    if (h < sniplength) {
      setTimeout(function() {
        addNextCharacter(h);
      }, 1000);
    }
  })(0);
});

延迟 Javascript

Making a delay in Javascript

javascript

wordpress

delay