Javascript 我想在html页面上一次一个字符。完成后，加载下一个

我正在开发一个javascript应用程序。 我坚持执行这一点。 我可以加载所有字符，但我想实现：-完成后加载一个字符加载下一个字符。 一次一个字符

我想加载一个字符。完成后加载next，然后在完成后再次加载next，但每次只加载一个字符。

var chars=新数组（'我','很','爱');
控制台日志（chars）；
对于（i=0；i

像这样吗

我无法测试它，因为我不知道如何正确地划这些

你可以改变

setTimeout（writeFunction，1000）

到

writeFunction（）；

如果你不想暂停

var chars=新数组（'我', '很', '爱'),
cnt=0；
writeFunction（）
//c=我';
函数writeFunction（）{
如果（cnt>=字符长度）返回
c=字符[cnt]
var writer=HanziWriter.create（'character-target-div'，c{
宽度：150，
身高：150，
showCharacter:false，
填充：5
});
作家测验({
onMistake：函数（strokeData）{
log（‘哦，不！你在笔划上犯了错误’+strokeData.strokeNum）；
log（“到目前为止，您在此笔划上犯了“+strokeData.mistakesOnStroke+”错误”）；
log（“你在这次测验中犯了”+strokeData.totalErrors+“总错误”）；
console.log（“此字符中还有“+strokeData.strokesRemaining+”个笔划”）；
},
onCorrectStroke:函数（strokeData）{
log（'Yes！！！你得到了stroke'+strokeData.strokeNum+'correct！'）；
log（'您在该笔划上犯了'+strokeData.mistakesOnStroke+'错误'）；
log（“你在这次测验中犯了”+strokeData.totalErrors+“total Errors”）；
console.log（'此字符中还有'+strokeData.strokesRemaining+'笔划'）；
},
onComplete:函数（summaryData）{
log（'你做到了！你完成了绘图'+summaryData.character）；
console.log（'您在本次测验中犯了'+summaryData.totalErrors+'totalErrors'）；
flagComplete=true；
碳纳米管++
setTimeout（writeFunction，1000）
}
});
}

---

因此，您只希望在用户完成字符后继续循环。这意味着您的循环必须是异步的

JavaScript为此提供了

async

和

await

。唯一的要求是提供一个承诺，在字符完成时解决

以下是它的工作原理（未经测试）：

---

（async function（）{//那你还停留在哪一部分？“我想做X”这不是一个问题，如果你想做X，想办法把它变成一些小任务，在网上搜索你可能如何做每一件事，一旦你陷入其中一件事，这是一个很好的时间去问Stackoverflow。有没有一个特定的部分你被卡住了？很好，但在这里做得过火了？我添加了一个计数器和3行按预期完成。谢谢。是否可以从页面中删除以前的字符？找到答案。document.getElementById（'character-target-div'）。innerHTML=“”；
(async function() { // <-- add this wrapper
    var chars = new Array('我','很','爱');

    console.log(chars);

    for(i=0; i< chars.length; i++){
         console.log(chars[i]);

        await writeFunction(chars[i]);
    //  ^^^^^    
    }
})(); // execute immediately


//c = '我';


// Make the function async, so it returns a promise
async function writeFunction(c) {
    // Wrap the code inside a Promise constructor callback:
    return new Promise(function (resolve, reject) {
        var writer = HanziWriter.create('character-target-div' , c , {
            width: 150,
            height: 150,
            showCharacter: false,
            padding: 5
        });
        writer.quiz({
            onMistake: function(strokeData) {
                console.log('Oh no! you made a mistake on stroke ' + strokeData.strokeNum);
                console.log("You've made " + strokeData.mistakesOnStroke + " mistakes on this stroke so far");
                console.log("You've made " + strokeData.totalMistakes + " total mistakes on this quiz");
                console.log("There are " + strokeData.strokesRemaining + " strokes remaining in this character");
            },
            onCorrectStroke: function(strokeData) {
                console.log('Yes!!! You got stroke ' + strokeData.strokeNum + ' correct!');
                console.log('You made ' + strokeData.mistakesOnStroke + ' mistakes on this stroke');
                console.log("You've made " + strokeData.totalMistakes + ' total mistakes on this quiz');
                console.log('There are ' + strokeData.strokesRemaining + ' strokes remaining in this character');
            },
            onComplete: function(summaryData) {
                console.log('You did it! You finished drawing ' + summaryData.character);
                console.log('You made ' + summaryData.totalMistakes + ' total mistakes on this quiz');
              // call resolve: that does the magic!
                resolve();
            }
        });
    });
}