javascript - 在 for 循环内为 .setTimeout() 创建闭包

Question

我正在尝试编写一个 JavaScript 程序，当单击按钮时，该程序将输入元素的值存储在数组中。该数组是分割的，每个单独的字母添加到一个 span 元素，然后附加到文档。这个想法是使用 setTimeout 创建打字效果。

我遇到了在循环内创建闭包的问题，​​因此目前 setTimeout 函数始终返回迭代的最终值。

相关函数位于代码块的底部，名为 addTextToBoard();

var noteButton = document.querySelector('[data-js="button"]');

noteButton.addEventListener("click",function() {
  var messageIn = document.querySelector('[data-js="input"]');
  var message = messageIn.value;
  postToBoard(message);
});

function postToBoard(val) {
  var noteBoard = document.querySelector('[data-js="noteboard"]');
  var newElement = document.createElement('div');
  newElement.classList.add('noteboard__item');
  noteBoard.appendChild(newElement);
  setTimeout(function(){
    newElement.classList.add('active');
  }, 200);
  addTextToBoard(newElement, val);
}

function addTextToBoard(el, val) {
   var wordArray = val.split('');
   for(i = 0; i < wordArray.length; i++) {
       var letter = document.createElement('span');
       letter.innerHTML = wordArray[i];
       setTimeout(function(x){
         return function() {}
         el.appendChild(letter);
       }(i),1000);
   }
}

我相信我已经很接近了，我只是没有完全理解创建闭包的语法。如果有人能够在正确的方向上戳戳，而不必给出完整的解决方案，那就太好了。

我基本上尝试粘贴来自 here 的以下代码片段但我一路上错过了一些东西!

setTimeout(function(x) { return function() { console.log(x); }; }(i), 1000*i);

最好，

jack

Answer 1

你已经很接近了。

由于“letter”变量发生变化，您将一遍又一遍地仅添加最后一个字母。您需要在 setTimeout() 回调函数中“保存”当前字母，一种方法如下:

function appendMyLetter(letter) {
  return(function() {
    el.append.Child(letter);
  });
}

function addTextToBoard(el, val) {
   var wordArray = val.split('');
   for(i = 0; i < wordArray.length; i++) {
       var letter = document.createElement('span');
       letter.innerHTML = wordArray[i];
       setTimeout(appendMyLetter(letter), 1000);
   }
}

这样，appendMyLetter() 函数就会使用不同的参数(每个字母一个)进行调用，并返回一个具有正确“存储”值的函数，以便由 setTimeout( )。

编辑

仔细查看您的 setTimeout() 代码

setTimeout(function(x){
  return function() {}
    el.appendChild(letter);
}(i),1000);

如果您使用正确的参数并在返回的函数中使用 appendChild() ，它会工作得很好，如下所示:

setTimeout(function(x){
  return(function() {
    el.appendChild(x);
  });
}(letter),1000);