Tối ưu hóa mã Javascript cho Tìm()

Question

Tôi có mã C# chạy truy vấn trong SQL và trả về khoảng 2000 hàng. Sau đó, kiểm soát Treeview được tạo và thêm trang chính của tôi. Điều này được thực hiện gần như ngay lập tức, đó là tốt.

var orgId = $('select[name="ctl00$PageContent$FunctionsDropDownList"] option:selected').val(); 
     if (!orgId) { 
      return false; 
     } 
     //calls serverside get data 
     //This line happens quickly 
     $('#ctl00_PageContent_HiddenRulesDialogTriggerButton').click(); 

     //This part takes about 10-15 minutes to finally get to the true 
     var i = setInterval(function() { 
      if ($('#ctl00_PageContent_treeview').find('table').length > 0) 
      { 
       clearInterval(i); 
       StartDialog(); 
       return false; 
      } 
     }); 

Vì vậy, phải mất khoảng 10-15 phút để đạt số clearInterval(i). Khi đó, i = 978. Không chắc tại sao phải mất quá lâu. Có thể find() rất chậm. Có ai khuyên bạn nên thay thế?

EDIT

Answer 1

Hãy thử sử dụng .one(), DOMNodeInserted sự kiện, giao sự kiện để document.

function StartDialog(el) { 
 
    console.log(el) 
 
} 
 

 
$(document) 
 
.one("DOMNodeInserted" 
 
, "#ctl00_PageContent_treeview table" 
 
, function(e) { 
 
    StartDialog(this) 
 
}); 
 

 
$("#ctl00_PageContent_treeview").append("<table></table>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="ctl00_PageContent_treeview"></div>

Answer 2

Vấn đề có lẽ là một thực tế rằng bạn đang gọi setInterval mà không cần đối số thứ hai (khoảng thời gian)

Hãy nhìn vào những gì mã của bạn dường như để làm.

1. Truy vấn phụ trợ, kéo dữ liệu cần thiết để tạo treeview. Điều này được thực hiện nhanh chóng.
2. Tạo cây không đồng bộ.
3. Khi cây đang xây dựng, hãy tiếp tục kiểm tra bằng tìm() để xem liệu cây đã sẵn sàng chưa.

Một vài vấn đề.

1. Tất cả truy vấn DOM khá chậm so với thao tác dữ liệu không DOM. Vì vậy, có, find() không phải là chức năng nhanh nhất vì nó tìm kiếm toàn bộ DOM bắt đầu với đối tượng cha mẹ bạn chỉ định và trả về các đối tượng mà nó tìm thấy.
2. Nếu bạn chạy setInterval chỉ với một lập luận như bạn làm:

Code:

var timer_id = setInterval(function() { 
    ...code here... 
}); 

... Tôi nghĩ rằng nó thực thi mỗi phần nghìn giây. Tôi đã thử nghiệm điều này với mã này:

var k = 1; 
var i = setInterval(function() { 
    if (k < 100) 
    { 
     k += 1; 
    } else { 
     clearInterval(i); 
     window.alert('Finished!'); 
    } 
//No second argument 
}); 

... và nó đã hoàn tất gần như ngay lập tức.

Vì vậy, tôi đoán nó sẽ diễn ra rất chậm vì chương trình đang kích hoạt một tìm kiếm DOM tốn kém hàng trăm lần mỗi giây. Các giải pháp là:

1. Cung cấp chức năng làm bất cứ điều gì bạn cần ở cuối xây dựng cây làm gọi lại cho chức năng xây dựng không đồng bộ. Bằng cách này bạn loại bỏ sự cần thiết phải kiểm tra.
2. Cố gắng cung cấp một khoảng thời gian để setInterval và xem nếu nó giải quyết vấn đề của bạn bằng cách giải phóng các chương trình để xây dựng cây thay vì kiểm tra lặp đi lặp lại:

Code:

var i = setInterval(function() { 
    if ($('#ctl00_PageContent_treeview').find('table').length > 0) 
    { 
     clearInterval(i); 
     StartDialog(); 
     return false; 
    } 
//Once per second 
},1000); 

Một callback sẽ thực hành tốt hơn nhưng việc cung cấp khoảng thời gian có thể cũng sẽ hoạt động.