我如何激活3个不同的函数顺序在javascript

How do I activate 3 different functions in sequence in javascript?

本文关键字：函数 顺序 javascript 3个 何激活 激活      更新时间：2023-09-26

我已经尝试了一段时间了，但我不能让它工作。我的问题:我有3个功能(1使一个div变小，1更新的div, 1扩大的div)，这是由鼠标点击激活。但是它们同时激活，这意味着第一个(使div变小)由于第二个(更新div)而被跳过。第二个函数调用php函数来重新加载div中的数据。下面是3个函数:

function reduceView(Parent){
    $(Parent).find('#details').hide("slow", function(){
        // Animation complete.
    });
    // get width and Extend
    $(Parent).find("#" + Parent.ID + "").width("250px");
    var width = $(Parent).find("#" + Parent.ID + "").css("width");
    $(Parent).animate({
        width: width
    }, 500, function(){
        // Animation complete.
    });
}
function renewWindow(Parent){
    $(":animated").promise().done(function(){
        PHP.execute(Parent.id + "/home");
        $(Parent).find("div[class='Item-list']").remove();
        $(Parent).find("div[id='details']").remove();
        $(Parent).find("div[id='confirmDialog']").remove();
        $(Parent).append(PHP.response);
        initJquery();
        initEvents();
    });
}
function enlargeView(Parent){
    $(Parent).promise().done(function(){
        $(Parent).find('#details').show("slow", function(){
            // Animation complete.
        });
        // get width and Extend
        $(Parent).find("#" + Parent.ID + "").width("683px");
        var width = $(Parent).find("#" + Parent.ID + "").css("width");
        $(Parent).animate({
            width: width
        }, 500, function(){
            // Animation complete.
        });
    });
}

有任何线索如何让这三个工作顺序吗?'initJquery'和'initEvents'确保。click等被重新初始化。提前感谢!!

p。如果我遗漏了任何你可能需要的信息，不要犹豫，问!!

编辑:下面是调用函数 的代码
$(".selecter").click(function() {
    var Element = this;
    var ID = Element.id;
    var Parent = $(Element).closest(".drag-div")[0];
    reduceView(Parent);
    renewWindow(Parent);
    $(":animated").promise().done(function(){
        PHP.execute(Parent.id + "/details?" + Parent.id + "id="+ID);
        $(Parent).find('#details').html(PHP.response);
        enlargeView(Parent);
        initJquery();
    });
    $(Element).addClass("selected");
});

看起来你正在应用多个动画，然后使用$(":animated")选择器获得你想要的动画的承诺。在你的答案中没有足够的代码来运行它，但我的猜测是，在renewWindow中的闭包是由错误的承诺对象触发的——可能是页面上的一个甚至与此功能无关的对象。

试着从第一个函数返回你想要关闭的promise对象，如下所示:

function reduceView(Parent){
    var promise = $(Parent).find('#details').hide("slow", function(){
        // Animation complete.
    }).promise();
    // get width and Extend
    $(Parent).find("#" + Parent.ID + "").width("250px");
    var width = $(Parent).find("#" + Parent.ID + "").css("width");
    $(Parent).animate({
        width: width
    }, 500, function(){
        // Animation complete.
    });
    return promise;
}

然后，renewWindow可以消费这个承诺:

function renewWindow(Parent, promise){
    promise.done(function(){
        PHP.execute(Parent.id + "/home");
        $(Parent).find("div[class='Item-list']").remove();
        $(Parent).find("div[id='details']").remove();
        $(Parent).find("div[id='confirmDialog']").remove();
        $(Parent).append(PHP.response);
        initJquery();
        initEvents();
    });
}

这样你就知道你用来触发你的函数的承诺就是你用来隐藏div的承诺。

相关文章：