zoukankan      html  css  js  c++  java
  • jQuery实现Ajax请求时,页面显示等待的效果,超过指定请求时间后,进行其他操作

      背景:有一个按钮,点击之后向后端程序发起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绑定的事件。

  • 相关阅读:
    libuv::线程
    libuv::定时器
    libuv::线程池
    libuv::线程同步
    ABAQUS 2017 安装后无法运行问题
    Abaqus2017安装全过程
    ModelCenter安装详解
    centos下安装Ansys 17.2的全部过程
    Jmeter压力测试分布式部署
    Centos7永久挂载iso文件
  • 原文地址:https://www.cnblogs.com/-beyond/p/8941981.html
Copyright © 2011-2022 走看看