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

У меня есть некоторые вызовы ajax в документе сайта, которые отображают или скрывают индикатор выполнения в зависимости от состояния ajax

  $(document).ajaxStart(function(){ 
        $('#ajaxProgress').show(); 
    });
  $(document).ajaxStop(function(){ 
        $('#ajaxProgress').hide(); 
    });

Я хотел бы в основном перезаписать эти методы на других частях сайта, где сделано много быстрых небольших вызовов ajax, и не нужно, чтобы индикатор выполнения включался и исчезал. Я пытаюсь прикрепить их или вставить их в другие вызовы $.getJSON и $.ajax. Я попытался связать их, но, видимо, это нехорошо.

$.getJSON().ajaxStart(function(){ 'kill preloader'});

ОТВЕТЫ

Ответ 1

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

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

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

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

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

Получил идею здесь при поиске ответа.

EDIT: У меня не было времени проверить его, увы.

Ответ 2

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

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

Ответ 4

В объекте options есть атрибут .ajax() принимает глобальный вызов.

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

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

Ответ 5

К сожалению, в событии 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);
    }
 );

Ответ 6

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

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

Ответ 7

использовать перед отправкой или выполнять функции обратного вызова в вызове ajax, например, таким образом..... Живой пример здесь fooobar.com/questions/19174/...

Источник ShoutingCode

Ответ 8

Используйте ajaxSend и ajaxComplete, если вы хотите найти запрос на запрос перед тем, как решить, что делать. См. Мой ответ здесь: fooobar.com/questions/19081/...

Ответ 9

<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, отображается сообщение журнала.

Ответ 10

У меня есть решение. Я устанавливаю глобальную переменную 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;
});