BlockUI mất quá nhiều thời gian để chặn hộp thoại jQuery

Tôi đang cố gắng sử dụng jQuery BlockUI Plugin để chặn hộp thoại jQuery trong khi thực hiện thuật toán sắp xếp. Chức năng sắp xếp hoạt động như sau:BlockUI mất quá nhiều thời gian để chặn hộp thoại jQuery

doSort : function() { 
    $("#sort_dlg").block(); 

    // sort... takes a few seconds 

    $("#sort_dlg").unblock(); 
}

Nó hoạt động, loại. Hộp thoại không bị chặn cho đến SAU KHI sắp xếp xong. (Các loại được thực hiện tất cả tại địa phương, không có cuộc gọi AJAX hoặc bất cứ điều gì.) Làm thế nào để có được nó để chặn trước khi sắp xếp?

tôi đã cố gắng di chuyển block() cuộc gọi đến phương pháp nút OK của hộp thoại:

$(function() { 
    $("#sort_dlg").dialog({ 
     autoOpen: false, 
     bgiframe: true, 
     modal: true, 
     buttons: { 
      "Cancel": function() { $(this).dialog("close"); }, 
      "OK": function() { 
       $("#sort_dlg").block(); 
       doSort(); 
      } 
     } 
    }); 
});

Nhưng điều đó không giúp đỡ. (Tôi mở để gợi ý chặn giao diện người dùng bằng cách sử dụng một số kỹ thuật khác.)

Nguồn

2009-10-14 twh

Điều này có thể do blockUI sử dụng hoạt ảnh mờ dần trong cửa sổ bật lên phương thức và trong khi các hoạt ảnh này đang chạy không đồng bộ, mã sắp xếp của bạn bắt đầu chạy. Vì mã sắp xếp của bạn đang chạy đồng bộ trên trang của bạn, trình duyệt bị chặn cho đến khi mã sắp xếp hoàn tất. Câu trả lời của bạn là sử dụng chức năng gọi lại, mà tôi đang xem xét ngay bây giờ ... – Pandincus

như chỉ bởi @Pandincus bạn có thể chờ đợi một thời gian để cho blockUI hoàn thành công việc của mình và sau đó bắt đầu sắp xếp:

$(function() { 
    $("#sort_dlg").dialog({ 
     autoOpen: false, 
     bgiframe: true, 
     modal: true, 
     buttons: { 
      "Cancel": function() { $(this).dialog("close"); }, 
      "OK": function() { 
       $("#sort_dlg").block(); 
       //WAIT FOR 1 SECOND BEFORE STARTING SORTING 
       setTimeout(function(){ doSort()}, 1000); 
      } 
     } 
    }); 
});

Nguồn

2009-10-14 04:17:46 TheVillageIdiot

O noes! Bị đánh vào cú đấm! :-D Tốt, thưa ngài. – Pandincus

Cảm ơn các bạn, điều này hoạt động. Bây giờ tôi phải quyết định có nên sử dụng BlockUI hay phương thức disable() (được đề xuất bởi Soviut). Tôi đang hướng tới BlockUI vì tôi nghĩ đơn giản hơn để nói cho người dùng biết "Vui lòng chờ ...". Với tính năng disable(), tôi không chắc chắn cách thực hiện tương tự mà không chèn div bán trong suốt theo cách thủ công với "Vui lòng đợi ..." bên trong. – twh

Thay vì chặn giao diện người dùng, bạn nên tắt hộp thoại bằng cách sử dụng disable() method thời điểm người dùng nhấp vào nút "đi". Bằng cách này, người dùng không thể nhấp vào bất kỳ thứ gì trong khi quá trình hoàn tất.

Nguồn

2009-10-14 04:15:09 Soviut

Cảm ơn, tôi đã bỏ lỡ phương pháp đó. FYI, nó có cùng một vấn đề như BlockUI như đã đề cập câu hỏi ban đầu của tôi. Kỹ thuật setTimeout được đề xuất bởi TheVillageIdiot và Pandincus hoạt động để giải quyết nó. – twh

Tiếp tục nhận xét của tôi trên:

Khi bạn gọi $ .blockUI (), nó sử dụng hình động để làm mờ trong ngăn chặn div và các hoạt ảnh này được chạy không đồng bộ. Dòng tiếp theo trong mã javascript của bạn là phân loại phức tạp của bạn và mã này chặn trình duyệt cho đến khi nó kết thúc. Kết quả là, các hình động đã bắt đầu chạy không được hoàn thành cho đến sau khi sắp xếp!

Plugin BlockUI dường như không có một lựa chọn chức năng gọi lại, đó là một sự xấu hổ, nhưng đó là OK - chúng ta có thể sử dụng setTimeout BUILTIN Javascript của:

<head> 
    <title>Test</title> 
    <script src="jquery.js"></script> 
    <script src="jquery.blockUI.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#btnTest").click(function() { 
       $.blockUI(); 
       setTimeout(doComplicatedStuff, 1000); 
      }); 
     }); 
     function doComplicatedStuff() 
     { 
      for(i = 0; i < 100000000; i++) 
      { 
       // ooh, complicated logic! 
      } 
      $.unblockUI(); 
     } 
    </script> 
</head> 
<body> 
    <p><input type="button" id="btnTest" value="Test" /></p> 
</body>

Mặc dù đây không phải là một khoa học chính xác , về cơ bản chúng tôi đoán rằng việc trì hoãn mã phức tạp trong 1 giây sẽ cho BlockUI đủ thời gian để hiển thị lớp phủ.

Hy vọng điều này sẽ hữu ích!

Nguồn

2009-10-14 04:19:12 Pandincus

$ .blockUI có tùy chọn được gọi là "fadeIn" mặc định là 200 mili giây. Bạn có thể đặt giá trị này bằng 0 để làm cho khối trang xảy ra ngay lập tức khi phương thức được gọi. Điều này vô hiệu hóa fadeIn.

$(function() { 
$("#sort_dlg").dialog({ 
    autoOpen: false, 
    bgiframe: true, 
    modal: true, 
    buttons: { 
     "Cancel": function() { $(this).dialog("close"); }, 
     "OK": function() { 
      $("#sort_dlg").block({ fadeIn: 0 }); // disable fadeIn 
      doSort(); 
     } 
    } 
});

Nguồn

2010-08-30 21:26:11 radian21

+1 - Cảm ơn rất nhiều người! Điều fadeIn của bạn đã làm điều kỳ diệu cho vấn đề của tôi :) –

BlockUI mất quá nhiều thời gian để chặn hộp thoại jQuery

Trả lời

Các vấn đề liên quan