jquery：另一個完成時執行一個函數

Question

我需要你的幫助。 我想用jquery動畫面板。它必須打開點擊按鈕（函數OPEN_PANEL）並加載不同的PHP頁面，然後關閉時點擊一個類「關閉」（功能CLOSE_PANEL）的div。 這工作正常，問題是當我想打開一個不同的面板，當一個已經打開。它應該關閉打開的，然後打開我選擇的最後一個，但它看起來像它同時執行兩個功能。我該如何解決這個問題？

這是JavaScript代碼：

var panel_is_open=0; 
var last_open_panel=""; 

function animation_open_panel(id){ 
    window_height=$(window).height()*0.85; 
    $("#"+id+"_button").css({'background-color':'rgba(255,255,255,0.8)', 'box-shadow':'0px 5px 10px #39C', '-webkit-box-shadow':'0px 5px 10px #39C'}); 
    $("#main_panel").show().animate({ height: window_height+"px" }, 1500) 
    .animate({ width: "90%" },1000); 
    $("#main_panel").queue(function(){ 
     $(".close").show(); 
     $("#page_container").hide().load(id+"/"+id+".php",function(){ 
      $("#page_container").fadeIn(1000); 
     }); 
     $(this).dequeue(); 
    }); 
} 

function animation_close_panel(){ 
    $("#page_container").fadeOut(1000, function(){ 
     $("#main_panel").animate({ width: "637px" }, 1000) 
     .animate({ height:"0px" }, 1500, function(){ 
      $(".close").hide(); 
      $("#"+last_open_panel+"_button").css({'background-color':'', 'box-shadow':'', '-webkit-box-shadow':''}); 
     }); 
    }); 
} 

function close_panel(){ 
    if(panel_is_open==1){ 
     animation_close_panel(); 
     panel_is_open=0; 
    } 
} 

function open_panel(id){ 
    if(panel_is_open==0){ 
     animation_open_panel(id); 
     last_open_panel=id; 
    } 

    else if(panel_is_open==1){ 
     if(id!=last_open_panel){ 
      close_panel(); 
      open_panel(id); 
     } 
    } 

    panel_is_open=1; 
} 

非常感謝你提前爲您的幫助。

---

非常感謝您的建議，但我無法解決這兩個解決方案的問題。我錯了什麼，但我不明白是什麼。

這是我的代碼：

function close_panel(){ 
    if(panel_is_open==1){ 
     // animations here 
     panel_is_open=0; 
    } 
} 

function close_open_panel(next){ 
    close_panel(); 
    next(); 
} 

function open_panel(id){ 
    if(panel_is_open==0){ 
     // animations here 
     last_open_panel=id; 
     panel_is_open=1; 
    } 

    else if(panel_is_open==1){ 
     if(id!=last_open_panel){ 
      close_open_panel(function(){ 
       open_pannel(id); 
      }); 
     } 
    } 
} 

任何想法，我弄錯？ 謝謝。

Answer 1

您可以在函數中使用回調函數，例如

function open(callback) 
{ 
    // do stuff 
    callback(some_value); 
} 

然後你就可以這樣使用它：

open(function(value) 
{ 
    // anything here will be executed 
    // after the function has finished 
}); 

在callback()和function(value)值是可選的，你可以返回一個簡單的函數，而不是傳遞一個值，該值被稱爲回但是，它對於需要異步回調的某些功能很有用。

更多關於回調函數的信息：

• Getting a better understanding of callback functions in JavaScript

Answer 2

如果你是後jQuery的具體解決方案，然後查找Deferred Object：

jQuery.Deferred（），在推出版本1.5，是一個可鏈接的實用工具對象，可以將多個回調註冊到回調隊列中，調用回調隊列並轉發成功或失敗任何同步或異步功能的狀態。