Jquery 在另一个函数完成处理后执行该函数

我希望你能帮助我。。。我想做的正是四年前第N个孩子在下面的文章中提出的问题。我知道这个问题早就解决了。我在这里找到了解决办法，经过长时间的讨论，我发现了如何解决问题，现在我遇到了一大堆的挫折，除了再次打开这个话题，我无能为力。下面是我想做的：

基本上，我想定义在单击元素（参考框）时要切换的内容的行为。我有两个职能：

1.功能“删除内容”

用于检查是否打开除单击的引用以外的其他引用的内容，如果是，则关闭

function: 'appendRefContent2EndOfLine'

只需添加单击的引用框的内容并显示它

以下是重要的代码片段：

函数displayRefContent（clickedRefID）{

}

//这两个功能落后了

函数appendRefContent2EndOfLine（requestedRefID）{

}

这两个功能都完成了它们的功能。问题的发生者，当他们走到第一线时

removeRefContent（）。然后（appendRefContent2EndOfLine（clickedRefID））

请求。我想首先删除所有其他引用的内容（通过切换退出），并且只有在完成和$（'div.refAdditionalContent'）。删除完成后，才会执行appendRefContent2EndOfLine的其他函数

我读了很多关于异步、排队和序列的东西，但根本不明白为什么我的解决方案不起作用。结果是，两个函数同时执行，导致冲突

到目前为止，我考虑了许多其他的解决方法，我选择的方法是最优雅的。但我很乐意了解你的想法

谢谢你们

---

再次为弗兰克干杯，更新代码：

用于控制显示和隐藏元素内容的函数：

function displayRefContent ( clickedRefID ) {           
    if ( $( 'div#' + clickedRefID + '_refAdditionalContent' ).length ) { // check, if element is opened already, if yes then close only         
        removeRefContent();         
    } else {                        
        if ( $( 'div.refAdditionalContent' ).length ) {      // check whether other element is opened and close first, before open another element                      
            removeRefContent().then( appendRefContent2EndOfLine ( clickedRefID ) );                     
        } else {            
            appendRefContent2EndOfLine ( clickedRefID ); // if no other content element is opened, only open element                
        }           
    }               
}   

这两个函数首先淡出并删除对象，然后追加并淡入新对象

var removeRefContent = function () {            
    var defRemoveContent = $.Deferred();        
    $( 'div.refAdditionalContent' ).slideToggle( 500 , function()       
        $( 'div.refAdditionalContent' ).remove();
        defRemoveContent.resolve();
    });                             
    return defRemoveContent.promise();      
}

function appendRefContent2EndOfLine ( requestedRefID ) {            

    // get refContent from reference storage container (could be more elegant, but not relevant here)
    var refContent = '<div id="' + requestedRefID + '_refAdditionalContent" class="refAdditionalContent">';
        refContent = refContent + $( 'div#' + requestedRefID + '_additionalContentStorageContainer' ).html();
    refContent = refContent + '</div>'; 

    var lastElementInRowID = ...;    // some code to find last refPreviewImage in elements row and store in variable lastElementInRowID 

    // add refContent after last element in row and toggle in       
    $( 'div#' + lastElementInRowID + '_ref' ).after( refContent );  
    $( 'div#' + requestedRefID + '_refAdditionalContent' ).slideToggle( 500 );      

}

var removeRefContent=function（）{
var defRemoveContent=$.Deferred（）；
$（'div.refAdditionalContent'）。滑动切换（500，函数（）
$（'div.refAdditionalContent'）.remove（）；
defRemoveContent.resolve（）；
});                             
返回defRemoveContent.promise（）；
}
函数appendRefContent2EndOfLine（requestedRefID）{
//从引用存储容器获取refContent（可能更优雅，但此处不相关）
var refContent=''；
refContent=refContent+$（'div#'+requestedRefID+'u additionalContentStorageContainer'）.html（）；
refContent=refContent+''；
var lastElementInRowID=…；//在元素行中查找最后一个refPreviewImage并存储在变量lastElementInRowID中的一些代码
//在行中最后一个元素后添加refContent并在中切换
$（'div#'+lastElementInRowID+''u ref'）。在（refContent）之后；
$（'div#'+requestedRefID+''u refAdditionalContent'）。slideToggle（500）；
}

问题在于displayRefContent的情况，其中已经有打开的内容，需要先关闭该内容，然后再打开新内容。它同时执行，因此我无法影响顺序和计时（函数RemoveEFContent完成后的函数appendRefContent2EndOfLine）

感觉自己是世界上最血腥的初学者，沮丧，没有更多的想法可以遵循。此外，如果功能性受到其他因素的影响，例如文档未完全加载事实，则在document.ready（）之后加载内容。没有看到任何影响

谢谢，希望有人愿意帮忙

---

弗兰克

我知道这个问题解决了一百次。。。我真的我想我明白了。但现在，经过无数小时的故障排除，仍然看不到解决方案，但。。。找到了一些解决办法，但不想申请。

var removeRefContentDeferred = $.Deferred();

$( 'div.refAdditionalContent' ).slideToggle( 500 , function() {         
    $( 'div.refAdditionalContent' ).remove( function() {
        removeRefContentDeferred.resolve();
    });     
});     

return removeRefContentDeferred.promise();      

function displayRefContent ( clickedRefID ) {           
    if ( $( 'div#' + clickedRefID + '_refAdditionalContent' ).length ) { // check, if element is opened already, if yes then close only         
        removeRefContent();         
    } else {                        
        if ( $( 'div.refAdditionalContent' ).length ) {      // check whether other element is opened and close first, before open another element                      
            removeRefContent().then( appendRefContent2EndOfLine ( clickedRefID ) );                     
        } else {            
            appendRefContent2EndOfLine ( clickedRefID ); // if no other content element is opened, only open element                
        }           
    }               
}   

var removeRefContent = function () {            
    var defRemoveContent = $.Deferred();        
    $( 'div.refAdditionalContent' ).slideToggle( 500 , function()       
        $( 'div.refAdditionalContent' ).remove();
        defRemoveContent.resolve();
    });                             
    return defRemoveContent.promise();      
}

function appendRefContent2EndOfLine ( requestedRefID ) {            

    // get refContent from reference storage container (could be more elegant, but not relevant here)
    var refContent = '<div id="' + requestedRefID + '_refAdditionalContent" class="refAdditionalContent">';
        refContent = refContent + $( 'div#' + requestedRefID + '_additionalContentStorageContainer' ).html();
    refContent = refContent + '</div>'; 

    var lastElementInRowID = ...;    // some code to find last refPreviewImage in elements row and store in variable lastElementInRowID 

    // add refContent after last element in row and toggle in       
    $( 'div#' + lastElementInRowID + '_ref' ).after( refContent );  
    $( 'div#' + requestedRefID + '_refAdditionalContent' ).slideToggle( 500 );      

}