Как вызвать .ajaxStart () для определенных вызовов ajax

ПРИМЕЧАНИЕ 2018: Этот ответ устарел; не стесняйтесь предлагать исправление к этому ответу, которое будет работать.

Вы можете связать ajaxStart и ajaxStop, используя настраиваемое пространство имен:

$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

Затем вы временно отмените привязку в других частях сайта до ваших вызовов .json:

$(document).unbind(".mine");

Уловил идею здесь, пока искал ответ.

РЕДАКТИРОВАТЬ: У меня не было времени, чтобы проверить это, увы.

В объекте параметров есть атрибут .ajax () принимает название global.

Если установлено значение false, событие ajaxStart для вызова не запускается.

    $.ajax({
        url: "google.com",
        type: "GET",
        dataType: "json",
        cache: false,
        global: false, 
        success: function (data) {

Если вы поместите это в свою функцию, которая обрабатывает действие ajax, она будет связываться только тогда, когда это необходимо:

$('#yourDiv')
    .ajaxStart(function(){
        $("ResultsDiv").hide();
        $(this).show();
    })
    .ajaxStop(function(){
        $(this).hide();
        $(this).unbind("ajaxStart");
    });

Использовать локальные события Ajax

                success: function (jQxhr, errorCode, errorThrown) {
                    alert("Error : " + errorThrown);
                },
                beforeSend: function () {
                    $("#loading-image").show();
                },
                complete: function () {
                    $("#loading-image").hide();
                }

Кроме того, если вы хотите отключить вызовы .ajaxStart() и .ajaxStop(), вы можете установить для параметра global значение false в своих .ajax() запросах;)

Подробнее см. Здесь: Как вызвать .ajaxStart () для определенных вызовов ajax < / а>

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

Во всяком случае, вот одна идея. Почему бы в вашем методе ajaxStart не запустить анимацию, скажем, через 200 миллисекунд? Если запросы ajax завершаются за 200 миллисекунд, вы не показываете никакой анимации, в противном случае вы показываете анимацию. Код может выглядеть примерно так:

var animationController = function animationController()
{
    var timeout = null;
    var delayBy = 200; //Number of milliseconds to wait before ajax animation starts.

    var pub = {};

    var actualAnimationStart = function actualAnimationStart()
    {
        $('#ajaxProgress').show();
    };

    var actualAnimationStop = function actualAnimationStop()
    {
        $('#ajaxProgress').hide();
    };

    pub.startAnimation = function animationController$startAnimation() 
    { 
        timeout = setTimeout(actualAnimationStart, delayBy);
    };

    pub.stopAnimation = function animationController$stopAnimation()
    {
        //If ajax call finishes before the timeout occurs, we wouldn't have 
        //shown any animation.
        clearTimeout(timeout);
        actualAnimationStop();
    }

    return pub;
}();


$(document).ready(
    function()
    {
        $(document).ajaxStart(animationController.startAnimation);
        $(document).ajaxStop(animationController.stopAnimation);
    }
 );

используйте beforeSend или завершите функции обратного вызова в вызове ajax следующим образом ..... Живой пример находится здесь https://stackoverflow.com/a/34940340/5361795

Источник ShoutingCode

У меня есть решение. Я установил глобальную переменную js с именем showloader (по умолчанию установлено значение false). В любой из функций, которые вы хотите показать загрузчику, просто установите для нее значение true, прежде чем выполнять вызов ajax.

function doAjaxThing()
{
    showloader=true;
    $.ajax({yaddayadda});
}

Тогда у меня в голове есть следующее:

$(document).ajaxStart(function()
{
    if (showloader)
    {
        $('.loadingholder').fadeIn(200);
    }
});    

$(document).ajaxComplete(function() 
{
    $('.loadingholder').fadeOut(200);
    showloader=false;
});

Используйте ajaxSend и ajaxComplete, если вы хотите пересмотреть запрос, прежде чем решать, что делать. См. Мой ответ здесь: https://stackoverflow.com/a/15763341/117268

<div class="Local">Trigger</div>

<div class="result"></div>
<div class="log"></div>

$(document).ajaxStart(function() {
$( "log" )text( "Trigger Fire successfully." );
});

$( ".local" ).click(function() {
$( ".result" ).load("c:/refresh.html.");
});

Просто просмотрите этот пример, чтобы понять: когда пользователь щелкает элемент с классом Local и отправляется запрос Ajax, отображается сообщение журнала.