2010-11-16 14 views
7

Tôi đang làm việc để có danh sách chọn nhiều nơi bạn có thể chọn các mục và sau đó nhấp vào nút "Lên" hoặc "Xuống" để cho phép bạn sắp xếp lại các mục đó trong danh sách.Tại sao javascript này chạy quá chậm trong IE khi tất cả những gì nó làm là sửa đổi một danh sách lựa chọn?

Tôi đã có một khép kín ví dụ đơn giản:

<html> 
    <head> 
     <title>Example</title> 
    <script src="https://www.google.com/jsapi"></script> 
    <script> 
     google.load('jquery', '1.4.1'); 
    </script> 
    </head> 
    <body> 
     <select id="selectedDataPoints" multiple="multiple"> 
      <option>Pig</option> 
      <option>Duck</option> 
      <option>Dog</option> 
      <option>Zebra</option> 
      <option>Snake</option> 
      <option>Giraffe</option> 
      <option>Cow</option> 
     </select> 
    <input type="button" id="btnReorderUp" value="Up" /> 
    <input type="button" id="btnReorderDown" value="Down" /> 
    </body> 
</html> 

<script type="text/javascript"> 
    var DataPointSelector = (function() { 

    var $selectedList = $('#selectedDataPoints'); 

     $('#btnReorderUp').click(function(e) { 
      moveUp(); 
      e.preventDefault(); 
     }); 

     $('#btnReorderDown').click(function(e) { 
      moveDown(); 
      e.preventDefault(); 
     }); 

    function moveUp() { 
      var select = $selectedList[0]; 
      for (var i = 1, n = select.options.length; i < n; i++) 
       if (select.options[i].selected && !select.options[i - 1].selected) 
       select.insertBefore(select.options[i], select.options[i - 1]); 
     } 

     function moveDown() { 
      var select = $selectedList[0]; 
      for (var i = select.options.length - 1; i > 0; i--) 
       if (select.options[i].selected && !select.options[i + 1].selected) 
        select.insertBefore(select.options[i + 1], select.options[i]);   
     } 

    }()); 
</script> 

Tuy nhiên, nút Lên/Xuống mất nghĩa là 3-8 giây để có hiệu lực trong IE7/8. Nhấp chuột đầu tiên đôi khi sẽ nhanh nhưng sau đó phải mất một thời gian rất dài để danh sách lựa chọn cập nhật với các vị trí mới (đặc biệt nếu bạn có một vài mục được chọn).

Sự cố này không có trong Chrome/FF. Tôi sẽ không nghĩ rằng sắp xếp lại đơn giản này sẽ rất chuyên sâu!

Có ai có bất kỳ thông tin nào có thể được sử dụng để giúp tôi tăng tốc các hàm moveUp/moveDown không ?!

+0

Tôi đã rót qua mã đó và sẽ mất nhiều thời gian. Bạn có biết nếu đó là giới hạn tài nguyên hệ thống hay cái gì khác? –

+0

Bây giờ, điều này sẽ gây sốc cho bạn, nhưng hiệu suất JavaScript của IE chậm/kém. – Powerlord

+0

dòng dưới cùng: IE chậm. Thành thật mà nói tôi sẽ để nó ở đó; nó làm cho một động lực tốt cho mọi người để nâng cấp nếu họ có bằng chứng rõ ràng rằng trình duyệt của họ hút. (ở mức độ nghiêm túc, tôi biết đó có thể không phải là một lựa chọn, và bạn đã được đưa ra giải pháp làm việc, nhưng trong trường hợp đó là ý kiến ​​của tôi thì chỉ để người dùng IE bị ảnh hưởng) – Spudley

Trả lời

4

Thay vì di chuyển các phần tử DOM hiện có xung quanh, hãy tạo lại toàn bộ phần tử <select> bao gồm tất cả trẻ em cho IE.

2

IE chậm, chậm, chậm. Vì vậy, bạn nên kiểm tra mã của bạn để giảm thiểu các hoạt động không cần thiết.

@Arron Ý tưởng của Digulla là tốt. Nhưng bạn cũng có thể giảm thiểu thời gian xử lý theo các thay đổi sau:

function moveUp() { 
    var select = $selectedList[0]; 
    for (var i = 1, n = select.options.length; i < n; i++) 
    var selected = select.options[i], 
     selectedPrior = select.options[i - 1]; 
     // Don't locate obj/array element more than once 
    if (selected.selected && !selectedPrior.selected) { 
     select.insertBefore(selected, selectedPrior); 
     break; // Since we have found the right elements, don't do 
    }  // any further checking 
    } 

Đã thêm: Hmmm, bây giờ tôi thấy có thể chọn nhiều mục. Vì vậy, bạn cần di chuyển nhiều mục, vâng? Trong trường hợp đó, câu lệnh break không đúng.

Lớp giao diện người dùng IE có đang bẫy bạn không? - IE có xu hướng không cập nhật giao diện của màn hình cho đến khi chuỗi JS kết thúc. Cách giải quyết là chạy hẹn giờ với 0 giây. Điều đó sẽ mang lại cho công cụ dựng hình của IE và cho phép màn hình cập nhật.

+0

Có, tôi cần cho phép nhiều mục được chọn. Nó rất tốt có thể là lớp UI bẫy tôi. Bạn có nói rằng tôi nên chạy các chức năng với một bộ đếm thời gian? – Markus

+0

Bạn chạy một số mã, sau đó sử dụng setTimeout để gọi đoạn mã tiếp theo. setTimeout sẽ cho phép cập nhật giao diện người dùng IE, sau đó gọi cho bạn. Xem: http://stackoverflow.com/questions/787500/why-is-jquery-ajax-so-slow-on-ie7/787568#787568 –