如何让 .each() 等到每次迭代完成

Question

我正在使用来自this answer on SO 的打字机效果，目的是输入第一个 div，然后输入第二个 div（当第一个 div 完成输入时）。

<div class="text">
 Lorem ipsum dolor sit amet...
</div>
<div class="text">
 Cras eros augue, tempor...
</div>

JS：

// Create typewrite function as jQuery plugin:
// (From https://stackoverflow.com/a/22266737/3217306)
$.fn.typeText = function() {
    var keystrokeDelay = 10,

        self = this,
        str = self.html(),
        i = 0,
        isTag,
        text;

    self.html("");

    (function type() {
        text = str.slice(0, ++i);
        if (text == str) {
            console.log("completed typing");
            return;
        }
        self.html(text);

        var char = text.slice(-1);
        if (char == "<") {
            isTag = true;
        }
        if (char == ">") {
            isTag = false;
        }

        if (isTag) {
            return type();
        }
        setTimeout(type, keystrokeDelay);
    } ());
};

var textElements = $(".text");

// For each div.text, type them out
textElements.each(function() {
    $(this).typeText();
});

问题是，两者同时输入。我已经尝试了很多涉及承诺、回调等的不同方法，但我无法让它们在这种情况下工作。

JSFiddle

Answer 1

如果您可以使用ES6，我建议使用Promises 和async functions，使用for 循环而不是.each()。一旦你理解了这些，它就会使解决方案变得非常简单（为简洁起见，省略了一些未更改的代码）：

$.fn.typeText = function() {
    var keystrokeDelay = 10,
        self = this,
        ...
    return new Promise(function(resolve) { // <--- new
        self.html("");
        self.addClass("visible"); // <--- new, explained below

        (function type() {
            text = str.slice(0, ++i);
            if (text == str) {
                console.log("completed typing");
                resolve(); // <--- new
                return;
            }
            self.html(text);
            ...
    });
}

var textElements = $(".text");

(async function run() { // new
    for (var j = 0; j < textElements.length; j++) {
        await $(textElements[j]).typeText();
        // Waits for the promise in the .typeText() func to be fulfilled
        // before progressing to the next iteration of the for loop
    }
})();

你也需要一些 CSS，因为如果默认情况下文本没有隐藏，那么底部 div 将完全可见，而顶部 div 仍在输入（注意上面的 self.addClass("visible")）：

.text {
  display: none;
}
.visible {
  display: block;
}

见this JSFiddle。 （代码警告显示异步，因为 JSFiddle 没有完整的 ES6 提示）

Answer 2

注意，如果你把你想要打字机效果的div放到一个div中，它们会自动一个接一个地前进。

<div class="text">
  <p>Lorem ipsum dolor sit amet…</p>
  <p>Cras eros augue, tempor…</p>
</div>

$(".text").typeText();
/* Instead of
textElements.each(function() {
    $(this).typeText();
}); */

见this JSFiddle。

Answer 3

有很多方法可以做到这一点，我将展示的方式只是一种选择：

... 
self.html("");

$.fn.typeText.queue = $.fn.typeText.queue || [] // make a shared variable between the elements that call this function. This will call them in the order that were added

$.fn.typeText.queue.push(function type() {
    text = str.slice(0, ++i);
    if (text == str) {
        console.log("completed typing");
        $.fn.typeText.queue.shift(); // remove first element which just ended
        if ($.fn.typeText.queue.length > 0) { // if there are more
            $.fn.typeText.queue[0]() // start next
        }
        return;
    }
    ...
   setTimeout(type, keystrokeDelay);
});

if ($.fn.typeText.queue.length == 1) { // if its the first element added or no elements are in queue, call it
    $.fn.typeText.queue[0]();
}

};

这将适用于任何数量的元素，并将按顺序调用它们。如果您希望所有组同时运行，但在每个组中按顺序运行，则可以轻松更改功能来执行此操作。一种方法是将数组传递给方法并使用它而不是 $.fn.typeText.queue

完整代码：

$.fn.typeText = function() {
    var keystrokeDelay = 10,
    
    		self = this,
        str = self.html(),
        i = 0,
        isTag,
        text;

    self.html("");

    $.fn.typeText.queue = $.fn.typeText.queue || []

$.fn.typeText.queue.push(function type() {
        text = str.slice(0, ++i);
        if (text == str) {
            console.log("completed typing");
						$.fn.typeText.queue.shift(); // remove first element which just ended
          if ($.fn.typeText.queue.length > 0) { // if there are more
              $.fn.typeText.queue[0]() // start next
          }
          return;
        }
        self.html(text);

        var char = text.slice(-1);
        if (char == "<") {
            isTag = true;
        }
        if (char == ">") {
            isTag = false;
        }

        if (isTag) {
            return type();
        }
        setTimeout(type, keystrokeDelay);
    })

  if ($.fn.typeText.queue.length == 1) { // if its the first element added or no elements are in queue, call it
      $.fn.typeText.queue[0]();
  }
    
};

var textElements = $(".text");

textElements.each(function() {
    $(this).typeText();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum erat non velit euismod, ac tristique orci hendrerit. Nullam varius in sem sed tempor. Maecenas tincidunt, nisi a accumsan maximus, lectus sem congue ligula, eget tempus neque lacus quis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque at purus eleifend, euismod nibh ut, auctor nulla. Phasellus convallis nulla urna, porta egestas justo sollicitudin sit amet.
</div>
<div class="text">
  Cras eros augue, tempor ut velit ornare, dignissim sollicitudin mi. Duis accumsan diam sed nulla sodales mattis. Pellentesque nec efficitur nunc, vitae rutrum massa. Pellentesque metus metus, consequat in auctor non, lobortis eget ligula. Sed volutpat, dui vulputate congue iaculis, justo massa consequat turpis, id facilisis ex sapien eget ligula. Praesent eu erat lorem. Mauris id dui orci. Mauris vitae urna tortor. Proin luctus id purus non maximus.
</div>

Answer 4

使用setTimeout 和一个计数器，就像在 jQuery 插件中所做的那样。

var textElements = $(".text");
var counter = 0;

function typeDiv(){ 
     if(counter < textElements.length -1){
           textElements[counter].typeText();
            counter += 1;
            setTimeout(typeDiv, 2000);
      }
 }