Cách triển khai khóa JavaScript

Làm thế nào một cái gì đó có thể tương đương với lock C # có thể được triển khai trong JavaScript?

Vì vậy, để giải thích những gì tôi đang nghĩ, một trường hợp sử dụng đơn giản là:

Người dùng nhấp vào nút B. Btăng một sự kiện onclick. Nếu Blà trong event-statesự kiện, hãy đợi Bở trong ready-statetrước khi tuyên truyền. Nếu Bở trong ready-state, Bbị khóa và được đặt thành event-state, thì sự kiện sẽ lan truyền. Khi quá trình truyền của sự kiện hoàn tất, Bđược đặt thành ready-state.

Tôi có thể thấy điều gì đó gần với điều này có thể được thực hiện như thế nào, chỉ đơn giản bằng cách thêm và xóa lớp ready-statekhỏi nút. Tuy nhiên, vấn đề là người dùng có thể nhấp vào một nút hai lần liên tiếp nhanh hơn so với biến có thể được đặt, vì vậy nỗ lực khóa này sẽ không thành công trong một số trường hợp.

Có ai biết cách triển khai một khóa không bị lỗi trong JavaScript không?

Khóa là một ý tưởng đáng nghi vấn trong JS, được thiết kế là không có luồng và không cần bảo vệ đồng thời. Bạn đang tìm cách kết hợp các cuộc gọi khi thực hiện hoãn lại. Mô hình tôi làm theo cho việc này là sử dụng các lệnh gọi lại. Một cái gì đó như thế này:

var functionLock = false;
var functionCallbacks = [];
var lockingFunction = function (callback) {
    if (functionLock) {
        functionCallbacks.push(callback);
    } else {
        $.longRunning(function(response) {
             while(functionCallbacks.length){
                 var thisCallback = functionCallbacks.pop();
                 thisCallback(response);
             }
        });
    }
}

Bạn cũng có thể triển khai điều này bằng cách sử dụng trình nghe sự kiện DOM hoặc giải pháp pubsub.

JavaScript, với một số rất ít ngoại lệ ( XMLHttpRequest onreadystatechangetrình xử lý trong một số phiên bản của Firefox) đồng thời vòng lặp sự kiện . Vì vậy, bạn không cần phải lo lắng về việc khóa trong trường hợp này.

JavaScript có một mô hình đồng thời dựa trên một "vòng lặp sự kiện". Mô hình này khá khác so với mô hình trong các ngôn ngữ khác như C hoặc Java.

...

Thời gian chạy JavaScript chứa hàng đợi thông báo, là danh sách các thông báo sẽ được xử lý. Mỗi tin nhắn được liên kết với một chức năng. Khi ngăn xếp trống, một thông báo được đưa ra khỏi hàng đợi và được xử lý.Quá trình xử lý bao gồm việc gọi hàm liên kết (và do đó tạo ra một khung ngăn xếp ban đầu) Quá trình xử lý thông báo kết thúc khi ngăn xếp trống trở lại.

...

Mỗi thư được xử lý hoàn toàn trước khi bất kỳ thư nào khác được xử lý. Điều này cung cấp một số thuộc tính tốt khi lý luận về chương trình của bạn, bao gồm thực tế là bất cứ khi nào một hàm chạy, nó không thể được xóa trước và sẽ chạy hoàn toàn trước khi bất kỳ mã nào khác chạy (và có thể sửa đổi dữ liệu mà hàm thao tác). Điều này khác với C, chẳng hạn, trong đó nếu một hàm chạy trong một luồng, thì nó có thể bị dừng tại bất kỳ thời điểm nào để chạy một số mã khác trong một luồng khác.

Nhược điểm của mô hình này là nếu một thông báo mất quá nhiều thời gian để hoàn thành, ứng dụng web không thể xử lý các tương tác của người dùng như nhấp hoặc cuộn. Trình duyệt giảm thiểu điều này bằng hộp thoại "tập lệnh mất quá nhiều thời gian để chạy". Một phương pháp hay để làm theo là làm cho quá trình xử lý tin nhắn ngắn gọn và nếu có thể, hãy cắt một tin nhắn thành nhiều tin nhắn.

Để biết thêm liên kết về đồng thời vòng lặp sự kiện, hãy xem E

Tôi đã thành công mutex-hứa .

Tôi đồng ý với các câu trả lời khác mà bạn có thể không cần khóa trong trường hợp của mình. Nhưng không đúng là không bao giờ cần khóa trong Javascript. Bạn cần độc quyền lẫn nhau khi truy cập các tài nguyên bên ngoài không xử lý đồng thời.

Khóa là một khái niệm bắt buộc trong một hệ thống đa luồng. Ngay cả với các chuỗi worker, các tin nhắn được gửi theo giá trị giữa các worker vì vậy việc khóa là không cần thiết.

Tôi nghi ngờ rằng bạn chỉ cần đặt một semaphore (hệ thống gắn cờ) giữa các nút của bạn.

Tại sao bạn không tắt và bật nó sau khi kết thúc sự kiện?

<input type="button" id="xx" onclick="checkEnableSubmit('true');yourFunction();">

<script type="text/javascript">

function checkEnableSubmit(status) {  
  document.getElementById("xx").disabled = status;
}

function yourFunction(){

//add your functionality

checkEnableSubmit('false');
}

</script>

Chúc bạn viết mã vui vẻ !!!

Một số bổ sung cho câu trả lời của JoshRiver theo trường hợp của tôi;

var functionCallbacks = [];
    var functionLock = false;
    var getData = function (url, callback) {
                   if (functionLock) {
                        functionCallbacks.push(callback);
                   } else {
                       functionLock = true;
                       functionCallbacks.push(callback);
                        $.getJSON(url, function (data) {
                            while (functionCallbacks.length) {
                                var thisCallback = functionCallbacks.pop();
                                thisCallback(data);
                            }
                            functionLock = false;
                        });
                    }
                };

// Usage
getData("api/orders",function(data){
    barChart(data);
});
getData("api/orders",function(data){
  lineChart(data);
});

Sẽ chỉ có một lệnh gọi api và hai hàm này sẽ sử dụng cùng một kết quả.

Các khóa vẫn có công dụng trong JS. Theo kinh nghiệm của tôi, tôi chỉ cần sử dụng khóa để ngăn spam nhấp vào các phần tử thực hiện cuộc gọi AJAX. Nếu bạn đã thiết lập bộ tải cho các cuộc gọi AJAX thì điều này không bắt buộc (cũng như vô hiệu hóa nút sau khi nhấp). Nhưng một trong hai cách ở đây là những gì tôi đã sử dụng để khóa:

var LOCK_INDEX = [];
function LockCallback(key, action, manual) {
    if (LOCK_INDEX[key])
        return;
    LOCK_INDEX[key] = true;
    action(function () { delete LOCK_INDEX[key] });
    if (!manual)
        delete LOCK_INDEX[key];
}

Sử dụng:

Mở khóa bằng tay (thường dành cho XHR)

LockCallback('someKey',(delCallback) => { 
    //do stuff
    delCallback(); //Unlock method
}, true)

Mở khóa tự động

LockCallback('someKey',() => { 
    //do stuff
})

Đây là một cơ chế khóa đơn giản, được thực hiện thông qua đóng

const createLock = () => {

    let lockStatus = false

    const release = () => {
        lockStatus = false
    }

    const acuire = () => {
        if (lockStatus == true)
            return false
        lockStatus = true
        return true
    }
    
    return {
        lockStatus: lockStatus, 
        acuire: acuire,
        release: release,
    }
}

lock = createLock() // create a lock
lock.acuire() // acuired a lock

if (lock.acuire()){
  console.log("Was able to acuire");
} else {
  console.log("Was not to acuire"); // This will execute
}

lock.release() // now the lock is released

if(lock.acuire()){
  console.log("Was able to acuire"); // This will execute
} else {
  console.log("Was not to acuire"); 
}

lock.release() // Hey don't forget to release