0

0

jQuery.ajaxStop() 函数详解

巴扎黑

巴扎黑

发布时间:2017-07-03 11:01:37

|

1773人浏览过

|

来源于php中文网

原创

ajaxstop()函数用于为ajax请求的ajaxstop事件绑定处理函数。

这是一个全局AJAX事件函数,用于在ajaxStop事件被触发时执行绑定的事件处理函数。

jQuery官方文档描述:无论什么时候,当一个AJAX请求完成(无论成功或失败)时,jQuery会检查当前是否还有其他活跃的(未完成的)AJAX请求。如果在进程中没有找到其他活跃的AJAX请求,jQuery就会触发ajaxStop事件。此时,通过ajaxStop()函数绑定的所有事件处理函数都将被执行。

简而言之,当一个AJAX请求结束的时候,此时没有其他活跃的AJAX请求,该请求就会触发ajaxStop事件。

一般而言,连续执行多个AJAX请求,只有其中最后一个结束的AJAX请求会触发ajaxStop事件。等到所有AJAX请求执行完毕后,再次连续执行多个AJAX请求,还是只有其中最后一个结束的AJAX请求会触发ajaxStop事件。

如果某个AJAX请求被禁止触发全局AJAX事件,则它不会被视为活跃的AJAX请求。

该函数必须在jQuery对象实例上调用,ajaxStop()将为每个匹配元素绑定事件处理函数。当ajaxStop事件被触发时,所有匹配元素上绑定的处理函数都将被调用。事件处理函数内的this将指向当前DOM元素。

你可以为同一元素多次调用该函数,从而绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

从jQuery 1.8开始,该函数只能为document对象绑定事件处理函数,为其他元素绑定的事件处理函数不会起作用。

如果在jQuery.ajax()或jQuery.ajaxSetup()中将选项参数global设为false,可以禁止该AJAX请求触发全局的AJAX事件。

该函数属于jQuery对象(实例)。

语法

jQuery 1.0 新增该函数。

jQueryObject.ajaxStop( handler )

参数

参数 描述

魔众商城系统
魔众商城系统

魔众商城系统是一个在线B2C商城系统,支持购物车、商品多分类,可以帮您快速搭建一套企业私有化的商城系统。 魔众商城系统,简约不简单的在线商城系统。 魔众商城系统是一个全面、高效且简约的B2C电商解决方案,专为希望在线上拓展业务、提升客户体验的企业和个人设计。以下是关于魔众商城系统的详细介绍: 商品管理:系统支持轻松上传商品信息、设置价格、库存等参数,并通过精美的商品详情页

下载

handler Function类型触发该事件时,需要执行的事件处理函数。

返回值

ajaxStop()函数的返回值为jQuery类型,返回当前jQuery对象本身。

示例&说明

关于ajaxStop事件和ajaxStop事件的触发机制,你可以参考jQuery的jQuery.ajax()函数的部分源代码。

通过以下源代码,我们可以知道:jQuery会统计当前活跃的AJAX请求数。每当开始执行一个AJAX请求时,会在活跃数上加1;每当一个AJAX请求结束时,就在活跃数上减1。如果一个AJAX请求开始时,活跃数为0,则触发ajaxStart事件;如果一个AJAX请求结束时,活跃数为0,则触发ajaxStop事件。

// jQuery.ajax()函数的开头部分
var fireGlobals = s.global; // 是否允许触发全局AJAX事件
// 如果允许触发全局AJAX事件,并且活跃的AJAX请求数为0,则触发ajaxStart事件
if ( fireGlobals && jQuery.active++ === 0 ) {
    jQuery.event.trigger("ajaxStart");
}
// ... 省略中间的源代码
// jQuery.ajax()函数的末尾部分
if ( fireGlobals ) {
    globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
    // 如果允许触发全局事件,并且活跃的AJAX请求数为0,则触发ajaxStop事件
    if ( !( --jQuery.active ) ) {
        jQuery.event.trigger("ajaxStop");
    }
}

请参考以下HTML示例代码:

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>
<input id="btn" type="button" value="开始AJAX请求" />

以下是与ajaxStop()函数相关的jQuery示例代码,以演示ajaxStop()函数的具体用法:

请注意:并不是先执行的AJAX请求就一定先结束,这与整个AJAX请求过程中的网络、数据量、相关代码执行时间等方面密切相关。下面的示例代码均假设所有AJAX请求的用时相同,以便于解释说明。

以下代码请基于1.8之前版本的jQuery来运行。

var $divs = $("div");
$divs.ajaxStop( function(){
    alert("处理函数1:当前元素id为" + this.id );
} );
$divs.ajaxStop( function(){
    alert("处理函数2:当前元素id为" + this.id );
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求结束时,下一个AJAX请求正在执行,因此不会触发ajaxStop事件,也不会弹出对话框   
    $.ajax( { url: "index.html" } );    
    
    // 该AJAX请求结束时,上一个AJAX请求已经执行完毕,因此会触发ajaxStop事件
    // 它会弹出6次对话框 ,因为当前页面有3个div元素,我们为每个div元素绑定了2个事件处理函数
    $.ajax( { url: "myurl.php" } );
    
} );

如果当前jQuery为1.8及以上版本,上述jQuery代码不会弹出对话框。因为从jQuery 1.8开始,ajaxStop事件的处理函数必须绑定到document对象上才能生效。

因此,不论当前jQuery为何版本,如果不是特殊需求,我们都应该将ajaxStop事件的处理函数绑定到document对象上。

var $divs = $("div");
$divs.ajaxStop( function(){
    alert("处理函数1");
} );
$divs.ajaxStop( function(){
    alert("处理函数2");
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求结束时,下一个AJAX请求正在执行,因此不会触发ajaxStop事件,也不会弹出对话框   
    $.ajax( { url: "index.html" } );    
    
    // 该AJAX请求结束时,上一个AJAX请求已经执行完毕,因此会触发ajaxStop事件
    // 它会弹出2次对话框 ,因为我们为document绑定了2个事件处理函数
    $.ajax( { url: "myurl.php" } );
    
} );

现在,我们参考以下jQuery代码。我们将第二个AJAX请求延迟3秒执行(或其他能保证第一个AJAX请求执行完毕的时间值),此时两个AJAX请求都会弹出对话框。

var $doc = $( document );
$doc.ajaxStop( function(){
    alert("处理函数1" );
} );
$doc.ajaxStop( function(){
    alert("处理函数2" );
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求结束时,此时没有其他活跃的AJAX请求(下一个请求尚未执行),因此会触发ajaxStop事件
    // 它会弹出2次对话框
    $.ajax( { url: "index.html" } );
    // 延迟3秒执行第二个AJAX请求
    setTimeout( function(){
        
        // 该AJAX请求结束时,此时没有其他活跃的AJAX请求(上一个请求早已经执行完毕)
        // 因此会触发ajaxStop事件,会弹出2次对话框
        $.ajax( { url: "myurl.php" } );
        
    }, 3000);   
    
} );

如果第二个AJAX请求被禁止触发全局AJAX事件,则它不会被视作活跃的AJAX请求。第一个AJAX请求会触发ajaxStop事件。

var $doc = $( document );
$doc.ajaxStop( function(){
    alert("处理函数1" );
} );
$doc.ajaxStop( function(){
    alert("处理函数2" );
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求开始时,此时没有其他活跃的AJAX请求(下一个请求虽然尚未执行完成,但它被禁止触发全局AJAX事件,jQuery在检查活跃请求时会忽略掉它)
    // 因此会触发ajaxStop事件,会弹出2次对话框
    $.ajax( { url: "index.html" } );
    
    // 该AJAX请求开始时,此时没有其他活跃的AJAX请求,但它不会触发ajaxStop事件
    // 因为它的global选项为false,被禁止触发任何AJAX事件,所以它不会弹出对话框
    $.ajax( { 
        url: "myurl.php" ,
        global: false // 禁止触发全局AJAX事件
    } );
    
} );

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

1142

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

371

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

245

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

37

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

114

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

77

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

17

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

863

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

123

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Go 教程
Go 教程

共32课时 | 5.5万人学习

麻省理工大佬Python课程
麻省理工大佬Python课程

共34课时 | 5.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号