jquery功能完成后启动下一个功能

Question

因此，做一个“实时聊天的例子”，需要一些可以使用实时聊天的企业的3个例子我需要它，所以在第一个功能完成后，运行第二个等...

我不知道这是否是最好的方式来做到这一点像下面的循环安全地说我的jQuery技能不是那么好。如果有人能指引我正确的方向，或让我知道最好的方式来做到这一点，将不胜感激。

$(document).ready(function() { 

    chatOne(); 
    chatTwo(); 
    chatThree(); 
}); 

function chatOne() { 
    $(".chat .topbar").removeClass("one two three"); 
    $(".textbox").slideUp(400); 
    $(".textbox").delay(350).slideDown(400); 
    $(".textbox div p").fadeOut(200); 
    $(".chat .topbar").addClass("one"); 
    $(".topbar h1").html("Solar City Co"); 
    $(".chat .textbox p:nth-child(odd)").addClass("one"); 

    var textBox = ".chatOne p:nth-child"; 
    for (var i = 1; i <= 7; i++) { 
     $(".wave").delay(4500).fadeIn(200); 
     $(textBox + "(" + i + ")").delay(3500 * i).fadeIn(400, function() { scrollBot(); }); 
     $(".wave").delay(2300).fadeOut(200); 
    } 
} 

function chatTwo() { 
    $(".chat .topbar").removeClass("one two three"); 
    $(".textbox").slideUp(400); 
    $(".textbox").delay(350).slideDown(400); 
    $(".textbox div p").fadeOut(200); 
    $(".chat .topbar").addClass("two"); 
    $(".topbar h1").html("Steves car repairs"); 
    $(".chat .textbox p:nth-child(odd)").addClass("two"); 

    var textBox = ".chatTwo p:nth-child"; 
    for (var i = 1; i <= 10; i++) { 
     $(".wave").delay(4500).fadeIn(200); 
     $(textBox + "(" + i + ")").delay(3500 * i).fadeIn(400, function() { scrollBot(); }); 
     $(".wave").delay(2300).fadeOut(200); 
    } 
} 

function chatThree() { 
    $(".chat .topbar").removeClass("one two three"); 
    $(".textbox").slideUp(400); 
    $(".textbox").delay(350).slideDown(400); 
    $(".textbox div p").fadeOut(200); 
    $(".chat .topbar").addClass("three"); 
    $(".topbar h1").html("New York Fire Department"); 
    $(".chat .textbox p:nth-child(odd)").addClass("three"); 

    var textBox = ".chatThree p:nth-child"; 
    for (var i = 1; i <= 5; i++) { 
     $(".wave").delay(4500).fadeIn(200); 
     $(textBox + "(" + i + ")").delay(3500 * i).fadeIn(400, function() { scrollBot(); }); 
     $(".wave").delay(2300).fadeOut(200); 
    } 
} 

function scrollBot() { 
    $(".textbox").stop().animate(
     { 
      scrollTop: $(".textbox")[0].scrollHeight 
     }, 
     900 
    ); 
} 

https://codepen.io/nsmed/pen/eEeYva?editors=0010

Answer 1

您的代码存在的问题是您有很多延迟，并且该代码将运行异步。这意味着所有的函数都会在对方之后触发，之后的异步延迟将在我进入时发生。

所以我认为最好的方法是使用jQuery.Deferred（）对象并在函数返回时完成。然后你的所有功能都会等待并且跟随对方。

CodePen

function waitForEndOfChat(textBox) { 
    var dfd = jQuery.Deferred(); 

    (function rec(i) { 
     if (i > 2) { //Change the value here to increas the chat 
      console.log("end"); 
      dfd.resolve(); 
      return false; 
     } 

     $(".wave").delay(4500).fadeIn(200, function() { 
      $(textBox + "(" + i + ")").delay(3500 * i).fadeIn(400, function() { 
       scrollBot(); 
       $(".wave").delay(2300).fadeOut(200, function() { 
        rec(++i); 
       }); 
      }); 
     }); 
     console.log(i); 
    })(1); 

    return dfd.promise(); 
} 

Answer 2

所谓 “回调函数”，可以实现像这样：

$(document).ready(function() { 
    chatOne(chatTwo, chatThree); 
}); 

function chatOne(callback, callback2) { 
    // do stuff ... 

    callback(callback2); 
} 

function chatTwo(callback) { 
// do stuff ... 

    callback(); 
} 

的jsfiddle：https://jsfiddle.net/k3061vyq/

在这里，我传递到第一函数的另一个函数和它的论点。