Как обрабатывать несколько быстрых представлений ajax jQuery

Question

У меня есть на моем веб-сайте список флажков. Каждый раз, когда нажимается окно, сценарий ajax отправляет данные на сервер и сохраняет состояние записи в базе данных, а затем по методу done проверяется флажок.

Основная проблема заключается в том, что пользователь проверяет несколько ящиков быстро, большинство из них не проверяются, и, что еще хуже, некоторые из них сохраняются в базе данных, некоторые из них несколько непредсказуемы.

Любые идеи о том, как с этим справиться? Есть ли что-то, что я мог бы легко сделать для очереди запросов или, возможно, присоединиться ко всем запросам в одном? Я хочу что-то вроде веб-интерфейса google keep.

Answer 1

Для лучшего удобства пользователей я бы сразу установил флажок, когда пользователь нажмет на него, и пусть запрос будет отправлен на сервер анонимно. В противном случае пользователю пришлось бы ждать времени прохождения в оба конца для визуальной обратной связи, что, как правило, не так велико.

Вы можете, однако, легко реализовать своего рода метод queue: ing, который выполняет запрос «серийно», например. (Предупреждение непроверенного)

var queue = []; 
var processing = false; 

function queueRequest(data, cb){ 
    // Queue data to be send to the backend 
    // Also cb will be called after it's done 
    queue.push({ 
     data: data, 
     cb: cb 
    }); 
    processQueue(); 
} 

function processQueue(immediate) { 
    // If we have an empty queue, we are done! 
    if (queue.length === 0) { 
     processing = false; 
     return; 
    } 

    if (!processing || immediate) { 
     var item = queue.shift(); // Take first item 
     processing = true; 

     // Send the ajax request 
     $.ajax({ 
      url: "backend.com/checks", 
      data: item.data, 
      type: 'post', 
      success: function(res) { 
       if (typeof item.cb === "function") 
        cb(res); 

       // Go on with the queue 
       processQueue(true); // We call ourself, so it's "immediate" 
      } 
     }); 
    } 
} 

Затем очередь данные для отправки, как это:

queueRequest({checkbox:5}, function(res){ 
    // Check the checkbox here, or do w/e you want 
    // ... 
}); 

В прохладном мире я бы использовать обещание вместо обратного вызова, но это лучший пример для неподготовленный JS-глаз.

Answer 2

Я бы справиться с таким сценарием, как так:

пользователем проверяет окно -> окно получает проверено -> АЯКС пожаров -> если ответ успеха, держать проверено; else, снимите флажок и отобразите ошибку с ответом сервера

Answer 3

Mr. Polywhirl прав, не отправляйте ни одного запроса для каждого действия. Вместо этого я бы добавил функцию debounce, которая будет срабатывать только один раз после того, как xxx миллисекунд прошло с момента последней функции.

функция Дэвида Уолша дребезга (связанный выше):

function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
}; 

Вы должны быть в состоянии использовать это своего рода как это:

var data = []; 
var sendRequest = debounce(sendAjaxRequest, 200); 

function sendAjaxRequest() { 
    $.ajax({ /* Send Ajax Request */ }); 
    // Empty out the data array 
    data = []; 
} 

// Add data to the array whenever your checkbox is clicked and 
// queue up the ajax request 
$('.element').on('click', function() { 
    data[] = $(this).data('my-data'); 
    sendRequest(); 
})