在forEach循环中显示延迟的数组元素

Question

对于客户端，我需要使用打字机效果来显示数组中的四行不同文本

我的打字机效果设置很好，但我为什么var i = 0; var text; var txt = [ 'Lorem ipsum dummy text blabla.', 'Lorem IPSUM dummy text blabla.', 'Lorem ipsum DUMMY text blabla.', 'Lorem ipsum dummy TEXT blabla.' ]; var speed = 50; var delay = 3000 var demo = document.getElementById("demo"); function go() { txt.forEach(function(str, index) { text = str; // var to pass to typeWriter setTimeout(typeWriter(), delay * index); }); } function typeWriter() { if (i < text.length) { demo.innerHTML += text.charAt(i); i++; setTimeout(typeWriter, speed); } else { // When string is fully typed, delete after 2 second setTimeout(function() { demo.innerHTML = ''; i = 0; }, 2000); } }循环只显示数组中的最后一个元素而感到茫然

＆＃13;

＆＃13;

<button onclick="go()">Click me</button>

<p id="demo"></p>

＆＃13;

zip

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要传递callback个函数来循环遍历数组的项目

请查看此代码段

var i = 0;
var text;
var txt = [
  'Lorem ipsum dummy text blabla.',
  'Lorem IPSUM dummy text blabla.',
  'Lorem ipsum DUMMY text blabla.',
  'Lorem ipsum dummy TEXT blabla.'
];
var speed = 50;
var delay = 1000
var demo = document.getElementById("demo");

function go() {
  function loop(index) {
    if (index === txt.length) return;
       
    setTimeout(function() {
      text = txt[index];    
      typeWriter(function() {
        loop(++index);
      });      
    }, delay * index);
  }

  loop(0);
}

function typeWriter(cb) {
  if (i < text.length) {
    demo.innerHTML += text.charAt(i);
    i++;
    setTimeout(function() {
      typeWriter(cb);
    }, speed);
  } else {
    // When string is fully typed, delete after 2 second
    setTimeout(function() {
      demo.innerHTML += '<p>';
      i = 0;
      cb();
    }, 2000);
  }
}

<button onclick="go()">Click me</button>

<p id="demo"></p>

请参阅？现在循环正确。

Answer 2

我认为这是一个很好的问题来说明async iteration，一个全新的ES2018功能：

async function delay(value, time) {
    return new Promise(resolve => setTimeout(() => resolve(value), time));
}

async function *eachDelayed(values, time) {
    for (let value of values)
        yield await delay(value, time);
}

async function print(xs) {
    for await (let x of eachDelayed(xs, 50))
        document.body.innerHTML += x;
}

print('The quick brown fox jumps over the lazy dog!')

您需要使用最新的Chrome / FF来运行此功能。

Answer 3

更新用户界面的行是：

demo.innerHTML = '';

但需要：

demo.innerHTML += '<br>';

这样您就不会覆盖以前的输出，而是将新输出放在新行上。

此外，您实际上是在立即调用typewriter函数，因为setTimeout看起来像这样：

setTimeout(typeWriter(), delay * index);

而不仅仅是引用函数，如下所示：

setTimeout(typeWriter, delay * index);

var i = 0;
var text;
var txt = [
  'Lorem ipsum dummy text blabla.',
  'Lorem IPSUM dummy text blabla.',
  'Lorem ipsum DUMMY text blabla.',
  'Lorem ipsum dummy TEXT blabla.'
];
var speed = 50;
var delay = 3000
var demo = document.getElementById("demo");

function go() {
  txt.forEach(function(str, index) {
    text = str; // var to pass to typeWriter
    setTimeout(typeWriter, delay * index);
  });
}

function typeWriter() {
  if (i < text.length) {
    demo.innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  } else {
    // When string is fully typed, delete after 2 second
    setTimeout(function() {
      demo.innerHTML += '<br>';
      i = 0;
    }, 2000);
  }
}

<button onclick="go()">Click me</button>

<p id="demo"></p>

Answer 4

forEach没有延迟。 执行typeWriter时，它会看到text = 'Lorem ipsum dummy TEXT blabla.'

我没有那么优化的建议：

var txt = [
  'Lorem ipsum dummy text blabla.',
  'Lorem IPSUM dummy text blabla.',
  'Lorem ipsum DUMMY text blabla.',
  'Lorem ipsum dummy TEXT blabla.'
];

function go(){
  demo.innerHTML = '';
  txt.length && doType();
}

function doType(){

  if(!txt[0].length){ 
    txt.shift(); 
    demo.innerHTML += '<br />';
    return setTimeout( doType, 50 );
  }

  if(!txt.length) return;

  demo.innerHTML += txt[0][0];
  txt[0] = txt[0].substr(1);

  setTimeout( doType, 50 );
}

我相信你可以进行必要的修改。

Answer 5

这是一个将Promises与setTimeout偏移控制器结合使用的解决方案。

const speed = 50;
const delay = 2000;
      
const demo = document.getElementById("demo");

function go() {
	
  const textArray = [
    'Lorem ipsum dummy text blabla.',
    'Lorem IPSUM dummy text blabla.',
    'Lorem ipsum DUMMY text blabla.',
    'Lorem ipsum dummy TEXT blabla.'
  ];
	
  let linesToType = initializePromises(textArray)
	
  linesToType.reduce((promiseChain, currentLine) => {
    return promiseChain.then(currentLine);
  }, Promise.resolve())
  
}

var offsetController = (function() {
  let _offset = 0;
  return {
    increaseOffset(time) {
      _offset = _offset + time
    },
    getOffset(){
      return _offset;
    }
  }
})()

function initializePromises(textArray) {
  return textArray.map(line => typeWriter(line) )
}
	
function typeWriter(text) {
  offsetController.increaseOffset(delay);
  return new Promise((resolve, reject) => {
    let promises = text.split("").map((letter, index) => {
	  return printNextLetter(demo, text, index)
    })
    clearLine(demo);
    Promise.all(promises).then(() => { 
      resolve() 
    })
  })
}

function printNextLetter(element, text, i) {
  offsetController.increaseOffset(speed);
  return new Promise((resolve) => setTimeout(() => {
    element.innerHTML += text.charAt(i);
    resolve()
  }, offsetController.getOffset()));
}

function clearLine(element) {
  offsetController.increaseOffset(delay);
  return new Promise((resolve) => setTimeout(() => {
    element.innerHTML = "";
    resolve()
  }, offsetController.getOffset()));
}

<button onclick="go()">Click me</button>

<p id="demo"></p>