【问题标题】:Problem using multiple jquery ajax request in a single page在单个页面中使用多个 jquery ajax 请求的问题
【发布时间】:2020-09-12 07:16:09
【问题描述】:

您好,我正在开发一个 PHP 项目,我需要使用 ajax 请求加载一些请求。下面是我的请求函数。

功能一:当 showNotify 事件被点击时,我调用 ajax 请求获取内容并使用 ajaxStart 显示 spinner,直到内容完全准备好!

 //* First click load nofication
$(document).on('click', '#showNotify', function() {
    let check = $(this).data('check');
    if(check === 0) {
        //* Process notification
        $(this).attr('data-check', 1);
        
        //* Load ajax request
        $(document).ajaxStart(function() {
            $('#notify-wait').show();
        });

        $(document).ajaxComplete(function() {
            $('#notify-wait').hide();
            $('#list-noti').show();
        });

        $.ajax({
            url: '/list-dd-notifications',
            method: 'GET',
            success: function() {
                $('#notif-unread').hide();
            }
        });
    }
});

功能二:我需要从服务器端检查用户是否有新的未就绪通知并显示新的通知标志。

function checkNewFotify() {
    $.ajax({
        url: '/check-notifications',
        method: 'GET',
        success: function(data) {
            if(data) {
                if($('#notif-unread').is(":hidden"))
                {
                    $('#notif-unread').show();
                }
            }
            else
            {
                if($('#notif-unread').is(":visible"))
                {
                    $('#notif-unread').hide();
                }
            }
        }
    });
}

//* check for new notification
setInterval(() => {
    checkNewFotify();
}, 5000);

问题:只要 showNotify 一开始是下拉菜单,它就会显示加载器的微调器,直到请求完全加载,如果函数 checkNewFotify 正在执行的工作是每 5 秒刷新一次以检查服务器对于新通知,showNotify 中的 ajaxStart 将受到每次 checkNewFotify 在后台刷新时显示微调器加载器的影响。

请问如何阻止它在每 5 秒刷新一次时显示微调器加载器。

【问题讨论】:

    标签: javascript php ajax


    【解决方案1】:

    checkNewFotify() 的 ajax 上将全局选项设置为 false,这将阻止像 ajaxStart 这样的处理程序触发。

    $.ajax({
        url: '/check-notifications',
        method: 'GET',
        global: false,
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-06-08
      • 2015-10-30
      • 1970-01-01
      • 2015-12-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多