背景：有一个按钮，点击之后向后端程序发起Ajax请求，在请求结果没有返回之前，页面显示等待的效果，此时仍旧是异步请求，等待的效果在接收到结果后撤销。

　　需求：因为网络延迟或者后端程序的问题，在发起Ajax请求后，可能等待10s都接收不到数据，现在需要做的就是，如果等待时间超过10s，那么就提示用户进行其他操作，不用再继续等待结果，终止Ajax获取到数据后的操作，即认为Ajax永远取不到数据了。

　　解决方案：可以使用Jquery的ajax方法，方法中有timeout和error这两项，timeout的值是一个Number，表示多少毫秒超时；对应的error的值是一个function，是在执行ajax失败后的操作，因为指定timeout之后，一旦超时，则认为出现error，所以会执行error绑定的function。

　　示例如下：

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<script src="jquery.min.js"></script>

</head>

<body>

	<p id="p1"></p>

</body>

<script>

	$.ajax({

		url:"test.php",

		timeout:2000,

		success:function(data){$("#p1").html(data)},

		error:function(){$("#p1").html("wrong")}

	});

</script>

</html>

　　测试的时候，可以再test.php执行sleep函数，让ajax在指定时间内取出到结果。

　　需要注意的是：ajax请求已经发出了，即使timeout，你也是不能中断请求的，只不过现在你可以不再关心请求的返回结果，因为在timeout之后，即使获得结果，也不会执行ajax中为success绑定的事件。

jQuery实现Ajax请求时，页面显示等待的效果，超过指定请求时间后，进行其他操作的更多相关文章

  1. [转]jquery的ajax交付时“加载中”提示的处理方法

    本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法    方法1:使用ajaxStart方法定义一个全局的“加 ...

  2. ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果？

    ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...

  3. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

  4. AJAX请求 $.ajaxSetup方法的使用:设置AJAX请求的默认参数选项，当程序中需要发起多个AJAX请求时，则不用再为每一个请求配置请求的参数

    定义和用法ajaxSetup() 方法为将来的 AJAX 请求设置默认值.语法$.ajaxSetup({name:value, name:value, ... }) 该参数为带有一个或多个名称/值对的 ...

  5. jquery的ajax提交时加载处理方法

    1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...

  6. 解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 ...

  7. 发送ajax请求时页面被刷新

    浏览器默认会认为 button 的属性是submit.type='submit',会发生提交表单的默认行为,为button添加type="button"即可.

  8. 使用jquery、ajax不刷新页面打印表格（返回数据类型text、json）；

    效果图: 一:返回数据是text时 1.表单代码: <body> <form action="#" method="post"> 姓名: ...

  9. jquery的ajax提交时loading提示的处理方法

    方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){     $("#loading").ajaxStart(function(){   ...

随机推荐

  1. shell 关于字符切割　cut

    shell中运用于字符切割的是cut 其中 参数分别代表得意义是: -d :后面接分隔字符,将一段信息分割为数段,与 -f 一起使用 -f :将-d分割出来的数段 用 -f 取出第几段的意思 -c : ...

  2. 类中的 this关键字

    this可用于区分局部变量和成员变量,因为构造函数中如果使用 this.成员变量 = 参数值, 那么可以在new对象时,将初始化值赋值给成员变量,否则成员变量赋值失败, 所以this可以区分成员变量和 ...

  3. ABAP 7.50 新特性 – Open SQL中的宿主表达式和其它表达式

    在长期的停滞后,Open SQL的发展终于从沉睡中醒来.从ABAP 7.40开始,SAP推进了某些关键的改变,以尽可能地包含SQL92中的特性,并提供与ABAP CDS中的DDL里面的SELECT一样 ...

  4. eshint的配置

    { "strict" : "implied", //文件里面使用"use strict" "undef" : true, ...

  5. vue项目,ie11 浏览器报 Promise 未定义的错误

    报错:  {description: "“Promise”未定义", message: "“Promise”未定义", name: "Referenc ...

  6. Your kernel does not support swap limit capabilities.memory limit without swap

    原因是:由于内核不支持限制内存的设置 解决办法是:vim /etc/default/grub 修改为: 或者:GRUB_CMDLINE_LINUX="cgroup_enable=memory ...

  7. 定时器 setTimeout()超时调用和 setInterval()间歇调用

    JavaScript是单线程语言,但它允许通过设置定时器,也就是设置超时值和间歇时间来调度代码在特定的时刻执行.前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码. 超时调用需要使 ...

  8. [AH2017/HNOI2017]影魔

    嘟嘟嘟 这题真的挺神的,我是真没想出来. 洛谷的第一篇题解说的非常妙,实在是佩服. 就是我们首先预处理出对于第\(i\)个数,在\(i\)左边比第一个比\(i\)大的数\(l_i\),在\(i\)右边 ...

  9. sqlachemy 查询当日数据，

    Tokens.query.filter(Tokens.user_id == user_id, db.cast(Tokens.create_time, db.DATE) == db.cast(curre ...

  10. openvon安装

    一.安装环境 1.阿里云centos7 2.关闭防火墙,selinux 临时关闭:setenforce 0 永久关闭:vim /etc/selinux/config 3.修改yum源 1)备份原有的y ...