jQuery Ajax SyncLock

Question

У меня есть пара кнопок, которые пользователи могут нажимать, чтобы загрузить контент с $ .ajax в jQuery. Все кнопки загружают содержимое в один тег div. Проблема заключается в том, что если пользователи нажимают несколько раз быстро, содержимое может мигать несколько раз, прежде чем попасть на нужный контент.

Какой обходной путь у меня есть для этого? Я думал о чем-то похожем на функцию SyncLock .net, но в javascript / jQuery. Идеальным решением было бы отменить запросы, находящиеся в данный момент в очереди, и запустить новый.

Следует отметить, что может быть несколько несвязанных запросов ajax, поэтому я не могу очистить все запросы, только те, которые относятся к этому одному тегу div.

Answer 1

Очистка / отмена запроса - дорогостоящая задача, поэтому, если она действительно вам нужна, не делайте этого Это также не остановит выполнение на стороне сервера, просто закройте httprequest.

Что вам нужно сделать, это установить «блокировку» и заблокировать и разблокировать ее соответственно. Что-то вроде:

var working = false;

function startAjax() {
    working = true;
    // do ajax and wait for callback()
}

function callback() {
    working = false;
}

В кнопках .click () убедитесь, что вы проверяете, работает ли до фактического выполнения:

$("#thebutton1, #thebutton2").click(function() {
    if(working) {
        alert("Im in the middle of something");
    } else {
        // execute...
    }
});

Answer 2

То, что вы могли бы сделать, это сделать так, чтобы событие click всех кнопок, отправляющих вывод в один и тот же div, отключало кнопку. Затем в обратном вызове AJAX, после обработки ответа, вы можете снова включить их все.