Làm cách nào để chờ tải div trước khi gọi một chức năng khác?

Question

<script> 
var href; 

    $(function(){ 
     $("a.load").click(function (e) { 
      e.preventDefault(); 
      href = this; 

      // cover all bookmarks 
      $("."+($(this).attr("class"))).css('border-bottom', 'solid 1px black'); 
      $("."+($(this).attr("class"))).css('background-color', '#F5F5F5'); 

      // uncover chosen bookmark 
      $("#"+($(this).attr("id"))).css('border-bottom', 'solid 2px white'); 
      $("#"+($(this).attr("id"))).css('background-color', 'white'); 

      $("#tempMain").load($(this).attr("href")); // load content to temp div 

      setTimeout(function() {resizeDivs();}, 500); // synchronize size of #main and #rightColumn 
     }); 

    }); 

    function resizeDivs() { 
     var heightNew = $("#tempMain").css("height"); 
     $("#rightColumn").css('height',heightNew); 
     $("#main").css('height',heightNew); 
     // $('#main').load($(href).attr('href')); 
     $("#main").html($("#tempMain").html()); // is faster than loading again 
    } 
</script> 

Tôi đang tải các trang con vào div được chọn của trang chính của tôi bằng hàm jQuery. Để đồng bộ hóa chiều cao của cột div và cột chính, tôi đang sử dụng phương thức .css() của jQuery. Tôi muốn thay đổi kích thước để trông trơn tru, vì vậy tôi đã giải quyết nó theo các bước sau:
1. Tải nội dung của trang con vào div tạm thời ẩn.
2. Tính chiều cao của div tạm thời đó.
3. Thay đổi chiều cao của cột chính và cột phải thành chiều cao của div tạm thời đó.
4. Tải nội dung của trang con lên div chính.

Tuy nhiên, tôi biết rằng cách hiện tại của tôi làm điều này là khá lame vì sử dụng setTimeout() như một ngẫu hứng chờ tải nội dung - Tôi đã thử sử dụng $(document).ready nhưng không có may mắn. Sử dụng biến toàn cầu (var href) cũng không có vẻ là nghệ thuật giả mạo, nhưng việc chuyển ngang this toán tử của $("a.load").click chức năng của apply() cũng không hoạt động.

Cách thực hiện "đúng cách"?

Answer 1

Sử dụng tải callback

$("#tempMain").load($(this).attr("href"),function(){ 
    resizeDivs(); 
    // do other stuff load is completed 
}); 

Answer 2

Bạn có thể đính kèm một callback trong jQuery load chức năng:

$("#tempMain").load($(this).attr("href"), resizeDivs); 

see: http://api.jquery.com/load/

Answer 3

với jquery

function waitForElement(elementPath, callBack){ 
    window.setTimeout(function(){ 
    if($(elementPath).length){ 
     callBack(elementPath, $(elementPath)); 
    }else{ 
     waitForElement(elementPath, callBack); 
    } 
    },500) 
} 

ví dụ: sử dụng:

waitForElement("#myDiv",function(){ 
    console.log("done"); 
}); 

đây là không có jquery

function waitForElement(elementId, callBack){ 
    window.setTimeout(function(){ 
    var element = document.getElementById(elementId); 
    if(element){ 
     callBack(elementId, element); 
    }else{ 
     waitForElement(elementId, callBack); 
    } 
    },500) 
} 

ví dụ sử dụng:

waitForElement("yourId",function(){ 
    console.log("done"); 
});