jquery.each在继续循环之前等待函数完成

jquery .each waiting for function to finish before continuing through loop

本文关键字：等待 函数 each 继续 循环 jquery      更新时间：2023-09-26

我本质上是在尝试循环使用LI标记的集合，并插入一些文本来模拟某人写一个要做的事情列表的样子。这很有效，但它同时写入每个列表项，而不是等待。有没有一种简单的方法可以实现这一点？我在这里有一个JS小提琴设置：http://jsfiddle.net/fZpzT/但是代码看起来是这样的。谢谢

function addListItems() {
var str = {
    listitem1:'personal background check',
    listitem2:'look into my sketchy neighbor',
    listitem3:'look up my driving record',
    listitem4:'pick up milk',
    listitem5:'wash the car'
}
$('.list-container li').each(function(){
    var z = $(this).attr('id');
    var str2 = str[z];
    var delay = 0;
    for (var i = 0; i <= str2.length; i++) {
        (function(str2){
            delay += 100 + Math.floor(Math.random()*11)*6;
            setTimeout(function(){
                appendStr(str2);       
            },delay);
        })(str2[i])
    }
    function appendStr(str2) {
      $('#'+ z).append(str2);
    }
});
}

使延迟累积：jsFiddle 上的演示

var str = {
    listitem1: 'write the first item',
    listitem2: 'write the second item',
    listitem3: 'write the third item',
    listitem4: 'write the fourth item',
    listitem5: 'write the fifth item'
}, cumulativeDelay = 0;
$('.list-container li').each(function () {
    var z = $(this).attr('id');
    var str2 = str[z];
    var delay = cumulativeDelay;
    for (var i = 0; i <= str2.length; i++) {
        (function (str2) {
            delay += 100 + Math.floor(Math.random() * 11) * 6;
            setTimeout(function () {
                appendStr(str2);
            }, delay);
        })(str2[i])
    }
    cumulativeDelay = delay;
    function appendStr(str2) {
        $('#' + z).append(str2);
    }
    $(this).css('color', 'red');
});

我将反转工作：

  1. 你从你想写的字符串开始

  2. 对于每个字符串：

    1. 查找相应的列表项（按id）
    2. 用打字机的风格写出整串

    3. 完成后调用下一次迭代。

      var strings = [
  'personal background check',
  'look into my sketchy neighbor',
  'look up my driving record',
  'pick up milk',
  'wash the car'
];
function iterate(strings, idx)
{
  if (idx >= strings.length) { return; }
  var id = 'listitem' + (idx + 1),
  el = document.getElementById(id);
  typewriter(el, strings[idx], 0, function() {
    iterate(strings, idx + 1);
  });
}
function typewriter(el, str, idx, cb)
{
  if (idx >= str.length) {
    return cb();
  }
  setTimeout(function() {
    el.innerText = str.substr(0, idx + 1);
    typewriter(el, str, idx + 1, cb);
  }, 100 + Math.floor(Math.random() * 11) * 6);
}

演示

简化一下如何？使用两个变量在一个循环中迭代稍微修改过的数据结构的全部内容。就像这样。http://jsfiddle.net/cXykd/

var strings = 
[
    { "id":"listitem1", "text": "write the first item" },
    { "id":"listitem2", "text": "write the second item" },
    { "id":"listitem3", "text": "write the third item" },
    { "id":"listitem4", "text": "write the fourth item" },
    { "id":"listitem5", "text": "write the fifth item" },
 ]
var stringsIndex = 0;
var textIndex = 0;
AddString();
function AddString(){
    if (stringsIndex < strings.length){
        if (textIndex >= strings[stringsIndex].text.length)
        {
            stringsIndex++;
            if (stringsIndex == strings.length)
            {
                return;
            }
            textIndex = 0;
        }
        $("#" + strings[stringsIndex].id).append(strings[stringsIndex].text[textIndex]);
        textIndex++;
        var delay = 10 + Math.floor(Math.random()*11)*6;
        setTimeout(AddString, delay);
    }
}
相关文章：