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, после обработки ответа, вы можете снова включить их все.