отключить все кнопки мыши события до запроса Ajax завершен

Question

Так у меня есть список страниц что-то вроде этого:

//start loop 
<div id ='row-prd-<number>'> 
    <strong>product Name</strong> 
    <a href='#' id='edit-prd-<number>'>Edit</a> 
    <a href='#' id='delete-prd-<number>'>Delete</a> 
</div> 
//end loop 

В моей JavaScript, я что-то вроде:

$('#delete-prd-<number>').click() 
{ 
    //change style of the row to show its being deleted.. 
    $('row-prd-<number>').addClass('deleting'); 

    //make ajax call to delete 
    ajaxDeleteRecord(prd-<number>); 
} 

Теперь, это работает отлично , Я обеспокоен тем, что при более низком сценарии скорости соединения для удаления ajax-вызова требуется несколько секунд. Меня беспокоит, что произойдет, если пользователь нажмет кнопку редактирования или удаления другой записи. Поэтому у меня есть три вопроса:

1. Должен ли я отключать все события кликов на странице, пока не вернется вызов ajax? Для меня это не похоже на хороший вариант - предположим, что вызов ajax ошибочен ... в этом случае пользователь сейчас находится в состоянии, когда он/она больше не может нажимать на что-либо на странице!

2. Как же мне с этим справиться? ... Я как бы просто потерял, что делать. Думаю, это самый важный из трех вопросов, которые у меня есть.

1. Если мне пришлось отключить и повторно активировать клики по элементам на странице (edit/delete/new), есть ли простой способ сделать это? ... просто любопытно ...

Answer 1

Ваш сценарий 1 сделает трюк, чтобы отключить все остальные события. Это будет очень аккуратно.

Вы можете иметь другую вещь, чтобы иметь вызов Аякса быть синхронными, а не быть асинхронной установкой

async:false 

в вызове.

Синтаксис будет выглядеть следующим образом:

$.ajax({ 
     url: 'your url', 
     global: false, 
     type: 'POST', 
     data: {}, 
     async: false, 
     success: function() {}, 
     error: function() {} 
    });