我正在尝试编写一个 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
最佳答案
你已经很接近了。
由于“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);
关于javascript - 在 for 循环内为 .setTimeout() 创建闭包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37896759/