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/

在這裏，我傳遞到第一函數的另一個函數和它的論點。