Javascript 用于jQuery中带有回调函数的循环，或如何避免它们

我在jQuery中有一个小动画，需要在单击后以毫秒为单位快速显示单词和非单词

var arr = ['GOAT', 'BEAVER', 'TIGER', 'ELEPHANT', 'FOX', 'BEAR', 'BEE', 'CAT', 'DOG', 'MOUSE', 'LION', 'FISH', 'SHRIMP', 'HEN', 'GOOSE', 'COW', 'CROCODILE', 'DEER', 'MOOSE', 'HIPPOPOTAMUS', 'WOLF', 'RACCOON', 'HARE', 'OTTER', 'DOLPHIN', 'WHALE', 'CHICK'];

var narr = ['REQXARDE', 'YORSTDAJ', 'AWQPQQQR', 'FJSJAJAA', 'QQWPEEET', 'ALALOIYE', 'BOUILAARW', 'NVOSAQEWW', 'WARTYDIOS', 'SUPARWLISS', 'WQQQAPXXX', 'OOOSAAOEA', 'SSIUDHFWW', 'AWWWEIPP', 'AAZXDOUP', 'SURPAAARJ', 'AALDJWWA', 'WEEJSYSJ', 'REQXARDE', 'YORSTDAJ', 'AWQPQQQR', 'FJSJAJAA', 'QQWPEEET', 'ALALOIYE', 'BOUILAARW'];

var key = ['jQuery', 'Javascript', 'css3', 'stackoverflow', 'html5', 'animation'];

/* This selects a random value from each array */
function narr_val() { return narr[Math.floor(Math.random() * narr.length)]; }
function arr_val() { return arr[Math.floor(Math.random() * arr.length)]; }
function key_val() { return key[Math.floor(Math.random() * key.length)]; }

$( "#foo" ).bind("click tap", function(){

$("#foo").unbind( "click" ); 

//Block 0
$('#foo').fadeIn(1).delay(500).html('Attention!').fadeOut(1,function(){
$('#foo').fadeIn(1).delay(500).html('In 3...').fadeOut(1,function(){
$('#foo').fadeIn(1).delay(500).html('2...').fadeOut(1,function(){
$('#foo').fadeIn(1).delay(500).html('1...').fadeOut(1,function(){
$('#foo').fadeIn(1).delay(500).html('Go!').fadeOut(1,function(){

//Block 1
$('#foo').fadeIn(1).delay(175).html(narr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(40).html(key_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(175).html(narr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(320).html(arr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(40).html(narr_val()).fadeOut(1,function(){

//Block 2
$('#foo').fadeIn(1).delay(175).html(narr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(40).html(key_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(175).html(narr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(320).html(arr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(40).html(narr_val()).fadeOut(1,function(){

等等，有一个版本有27个区块，另一个版本有40个区块

我的问题是: 1） 有没有其他方法来代替使用嵌入式回调函数？

---

2） 用for循环或其他可以避免编写27个回调函数块的方法来编写语法吗？

在处理异步内容时，需要使用递归函数而不是for循环来进行迭代。如果不使用任何库，一种可能的方法是使用

var aims = [
    {delay:500, html:'Attention!'},
    {delay:500, html:'In 3...'},
    ...
];

function loop(i){
    if(i >= anims.length){
        //ANIMATION DONE
    }else{
        var a = anims[i];
        $('#foo').fadeIn(1).delay(a.delay).html(a.html).fadeOut(1,function(){
            loop(i+1);
        });
    }
}

loop(0);

---

避免Javascript中回调嵌套的最直接方法是使用命名回调，而不是匿名回调。例如：

function f1(){ $('#foo').fadeIn(1).delay(500).html('Attention!').fadeOut(1, f2); }
function f2(){ $('#foo').fadeIn(1).delay(500).html('In 3...').fadeOut(1,f2); }
function f3(){ ... }

function addToQueue($el, html, delay) {
    $el.fadeIn(1).delay(delay).queue(queuedHtml(html)).fadeOut(1);
}

$("#foo").bind("click tap", function () {
   var $foo = $("#foo");
   $foo.unbind("click");

   addToQueue($foo, 'Attention!', 500);
   addToQueue($foo, 'In 3...', 500);
   addToQueue($foo, '2...', 500);
   addToQueue($foo, '1...', 500);
   addToQueue($foo, 'Go!', 500);

   for (var i = 0; i < 27; ++i) {
       addToQueue($foo, narr_val(), 175);
       addToQueue($foo, key_val(), 40);
       addToQueue($foo, narr_val(), 175);
       addToQueue($foo, arr_val(), 320);
       addToQueue($foo, narr_val(), 40);
   }

   $foo.fadeIn(1).queue(queuedHtml('Terminated'));
});

当然，有一堆硬编码的f1，f2，f3，fn。。。名称容易出错，根本不可维护。你能做的就是把每一步函数的延拓作为一个参数

var steps = [
    function (next){ $('#foo').fadeIn(1).delay(500).html('Attention!').fadeOut(1, next); },
    function (next){ $('#foo').fadeIn(1).delay(500).html('In 3...').fadeOut(1, next); },
    ...
];

然后使用链接函数按顺序调用每个步骤，并将下一步作为参数传递：

function chain(steps, onDone){
    function loop(i){
        if(i >= steps.length){
            onDone();
        )else{
            steps[i](function(){
                loop(i+1);
            });
        }
     }
     loop(0);
 }

 chain(steps, function(){ console.log("all done") });

---

如果您不想自己实现这些链接函数，有许多库（回调库或基于承诺库）提供这些链接函数。

另一种方法是通过创建可排队的.html调用来使用内置排队功能（有关更多信息，请参阅）：

这可以调整为使用命名队列而不是默认队列

完成此操作后，您可以将代码调整为以下内容：

$("#foo").bind("click tap", function () {
   var $foo = $("#foo");
   $foo.unbind("click");

   $foo.fadeIn(1).delay(500).queue(queuedHtml('Attention!')).fadeOut(1)
       .fadeIn(1).delay(500).queue(queuedHtml('In 3...')).fadeOut(1)
       .fadeIn(1).delay(500).queue(queuedHtml('2...')).fadeOut(1)
       .fadeIn(1).delay(500).queue(queuedHtml('1...')).fadeOut(1)
       .fadeIn(1).delay(500).queue(queuedHtml('Go!')).fadeOut(1);

   for (var i = 0; i < 27; ++i) {
       $foo.fadeIn(1).delay(175).queue(queuedHtml(narr_val())).fadeOut(1)
           .fadeIn(1).delay(40).queue(queuedHtml(key_val())).fadeOut(1)
           .fadeIn(1).delay(175).queue(queuedHtml(narr_val())).fadeOut(1)
           .fadeIn(1).delay(320).queue(queuedHtml(arr_val())).fadeOut(1)
           .fadeIn(1).delay(40).queue(queuedHtml(narr_val())).fadeOut(1);
   }

   $foo.fadeIn(1).queue(queuedHtml('Terminated'));
});

$（“#foo”）.bind（“点击”，函数（）{
变量$foo=$（“#foo”）；
$foo.解除绑定（“单击”）；
$foo.fadeIn（1）.延迟（500）.队列（queuedHtml（'Attention！'）.fadeOut（1）
.fadeIn（1）.延迟（500）.队列（queuedHtml（'In 3…'））.fadeOut（1）
.fadeIn（1）.延迟（500）.队列（queuedHtml（'2…'））.fadeOut（1）
.fadeIn（1）.延迟（500）.队列（queuedHtml（'1…'））.fadeOut（1）
.fadeIn（1）.延迟（500）.队列（queuedHtml（'Go！'）.fadeOut（1）；
对于（变量i=0；i<27；++i）{
$foo.fadeIn（1）.delay（175）.queue（queuedHtml（narr_val（））.fadeOut（1）
.fadeIn（1）.延迟（40）.队列（queuedHtml（key_val（））.fadeOut（1）
.fadeIn（1）.delay（175）.queue（queuedHtml（narr_val（））.fadeOut（1）
.fadeIn（1）.延迟（320）.队列（queuedHtml（arr_val（））.fadeOut（1）
.fadeIn（1）.延迟（40）.队列（queuedHtml（narr_val（））.fadeOut（1）；
}
$foo.fadeIn（1）.queue（queuedHtml（'Terminated'））；
});

通过重构一些重复的逻辑，您可以进一步减少代码，例如：

function f1(){ $('#foo').fadeIn(1).delay(500).html('Attention!').fadeOut(1, f2); }
function f2(){ $('#foo').fadeIn(1).delay(500).html('In 3...').fadeOut(1,f2); }
function f3(){ ... }

function addToQueue($el, html, delay) {
    $el.fadeIn(1).delay(delay).queue(queuedHtml(html)).fadeOut(1);
}

$("#foo").bind("click tap", function () {
   var $foo = $("#foo");
   $foo.unbind("click");

   addToQueue($foo, 'Attention!', 500);
   addToQueue($foo, 'In 3...', 500);
   addToQueue($foo, '2...', 500);
   addToQueue($foo, '1...', 500);
   addToQueue($foo, 'Go!', 500);

   for (var i = 0; i < 27; ++i) {
       addToQueue($foo, narr_val(), 175);
       addToQueue($foo, key_val(), 40);
       addToQueue($foo, narr_val(), 175);
       addToQueue($foo, arr_val(), 320);
       addToQueue($foo, narr_val(), 40);
   }

   $foo.fadeIn(1).queue(queuedHtml('Terminated'));
});

函数addToQueue（$el、html、delay）{
$el.fadeIn（1）.delay（delay）.queue（queuedHtml（html））.fadeOut（1）；
}
$（“#foo”）.bind（“点击”，函数（）{
变量$foo=$（“#foo”）；
$foo.解除绑定（“单击”）；
addToQueue（$foo，'Attention！'，500）；
addToQueue（$foo，'in3…'，500）；
addToQueue（$foo，'2…'，500）；
addToQueue（$foo，'1…'，500）；
addToQueue（$foo，'Go！'，500）；
对于（变量i=0；i<27；++i）{
addToQueue（$foo，narr_val（），175）；
addToQueue（$foo，key_val（），40）；
addToQueue（$foo，narr_val（），175）；
addToQueue（$foo，arr_val（），320）；
addToQueue（$foo，narr_val（），40）；
}
$foo.fadeIn（1）.queue（queuedHtml（'Terminated'））；
});

或者通过更多的重构来进一步减少它：

$("#foo").bind("click tap", function () {
   var $foo = $("#foo");
   $foo.unbind("click");

   $.each(['Attention', 'In 3...', '2...', '1...', 'Go!'], function(idx, val) {
       addToQueue($foo, val, 500);
   });

   var delays = [175, 40, 175, 320, 40];
   for (var i = 0; i < 27; ++i) {
       $.each([narr_val(), key_val(), narr_val(), arr_val(), narr_val()], function(idx, val) {
           addToQueue($foo, val, delays[idx]);
       });
   }

   $foo.fadeIn(1).queue(queuedHtml('Terminated'));
});

$（“#foo”）.bind（“点击”，函数（）{
变量$foo=$（“#foo”）；
$foo.解除绑定（“单击”）；
$。每个（['Attention'，'in3…'，'2…'，'1…'，'Go！']，函数（idx，val）{
addToQueue（$foo，val，500）；
});
var延迟=[175,40,175,320,40]；
对于（变量i=0；i<27；++i）{
$。每个（[narr_val（），key_val（），narr_val（），arr_val（），narr_val（）]，函数（idx，val）{
addToQueue（$foo，val，delays[idx]）；
});
}
$foo.fadeIn（1）.queue（queuedHtml（'Terminated'））；
});

---

是的，可能有。你看过排队系统了吗？我认为你不需要这些回调。我不想把它作为一个答案，因为我很确定有更好的方法，但这里可以帮助你：Downvoter，你愿意解释一下吗？@dc5:代码长度惊人地缩短了！还感谢您的逐步演示。然而，还有一个问题仍然存在，我不明白为什么，那就是时间似乎没有得到尊重。最长的延迟为320毫秒，发生在动物单词上。这意味着这个词应该在屏幕上被感知。相反，在非字上发生的延迟越长。因此，延迟似乎没有应用到正确的数组值上。逻辑当前正在设置html之前添加延迟，因此延迟320发生在设置动物词之前。动物单词显示40毫秒（最后一个延迟值）。如果这不是您想要的，您可以切换调用以使用延迟对html进行排队：

$el.fadeIn（1）.queue（queuedHtml（html））.delay（delay）.fadeOut（1）好的，明白了，谢谢！只需将delays变量更改为：var delays=[40175,40175320]；使它完全模仿我所拥有的。仔细想想，你可能会从这个链中得到更好的效果：淡出->更新html->淡出->延迟，具有更长的淡出/淡出值，如下所示：
$el.fadeOut（100）.queue（queuedHtml（html））.fadeIn（100）.delay（delay）
现在看来，1ms fadeIn/Out值可能不是必需的-如果您想要突然转换，您也可以删除它们。@Fred-我知道哪里出了问题-在您的回调版本中，
.html
调用在调用
.delay
后立即发生，因为该版本没有排队。我在制作排队版本时没有考虑到这一点。