Ngăn chặn việc thực thi Javascript hai lần

Question

Tôi có một tập lệnh mà tôi đang phát triển tạo ra hiệu ứng loại nút trượt. Năm div nằm bên cạnh eachother với một liên kết. Khi một trong các DIV được nhấp vào nội dung liên quan được mở rộng và phần còn lại của Div được đóng lại.

Vấn đề là, nếu người dùng nhấp vào Div hai lần trong khi nó tải hoặc nhấp vào một Div khác liên tiếp nhanh chóng, các vết nứt bắt đầu hiển thị.

Tôi tự hỏi liệu có thể chỉ cho phép truy vấn được thực thi một lần và chờ cho đến khi hoàn thành thay vì xếp hàng nó.

Đây là mã hiện tại của tôi, nếu nó là crap cảm thấy tự do bình luận về làm thế nào tôi có thể tốt hơn nó ... Tôi không phải là người giỏi nhất trong Javascript/jQuery: P

function mnuClick(x){ 
    //Reset all elements 
    if($('#'+x).width()!=369){ 
     $('.menu .menu_Graphic').fadeOut(300); 
     $('.menu_left .menu_Graphic').fadeOut(300); 
     $('.menu_right .menu_Graphic').fadeOut(300); 
     $('.menu').animate({width: "76px"},500); 
     $('.menu_left').animate({width: "76px"},500); 
     $('.menu_right').animate({width: "76px"},500); 
    } 
     var ElementId = '#' + x; 

     $(ElementId).animate({ 
      width: 369 + "px" 
     },500, function(){ 
      $(ElementId + ' .menu_Graphic').fadeIn(300); 
     }); 
} 

Cảm ơn trước, Chris.

Answer 1

Bạn cần cờ "isRunning". Kiểm tra nó trước khi bạn bắt đầu. Đặt nó khi bạn bắt đầu trình tự, xóa nó khi nó kết thúc.

Answer 2

(function() { 
var mutex = false; 

    function mnuClick(x){ 
     if (!mutex) { 
      mutex = !mutex; 

      /* all code here ... */ 

      mutex = !mutex; /* this statement should go into animation callback */ 
     } 

    } 

})(); 

mantain một nhà nước thông qua một biến nên bạn không thể nhấp vào nhiều hơn một lần cho đến khi mã đã thực hiện đầy đủ

Answer 3

bạn có thể tạo một Maskin vô hình và maskout (như nền trong hộp đèn vv) hoặc vô hiệu hóa nhấp chuột cho đến khi hoạt ảnh kết thúc.

Answer 4

bạn có thể rút bộ xử lý sự kiện onClick (mnuClick) khi sự kiện bắt đầu, để vô hiệu hóa việc gọi mnuClick hai lần, nhưng hãy nhớ khôi phục nó khi sự kiện kết thúc.

Answer 5

Trả lời nhanh: sử dụng .addClass và .removeClass và kiểm tra sự tồn tại của lớp tại thời gian thực thi. Kiểm tra nếu nó được thiết lập và trả về, hoặc thêm nó, thực thi mã, sau đó loại bỏ nó.