Question

所以制作一个＆＃34;实时聊天示例＆＃34;并且需要大约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/

这里我向第一个函数传递另一个函数及其参数。

函数完成后的Jquery启动下一个函数

2 个答案: