最近的PC项目遇到了一个问题，日志记录程序会在1s内多次发起对首页的请求，一时间没有找到原因。

简单描述一下问题：访问一个首页的时候，由于代码质量不高的原因，访问就连接数据库，但是同时存在的问题是一秒了多次发起了对首页的请求，请求中包含/favicon.ico（如此能不能判断是浏览器发起的呢？），也就导致了数据库出现很多连接，到此引起的连锁反应就是服务器内存占用飙升，接着就是卡卡卡……

由于能力不足的原因，一时间排查不出问题的原因，找不到很好的解决方案，找到了一个临时的方案“生成静态首页”。不过后期查看日志，在index.html存在的情况下，还是会出现请求404的问题（无解）。

生成静态首页也很愉快，于是很快就把补丁给打上去了，相反也就遇到了今天的问题，在此予以记录。

愉快的模拟了一个场景：

html代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>jquery-ajax-async</title>

</head>

<body>

	<button id="testAsync">测试</button>

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

	<script>

	$("#testAsync").bind("click", function() {

		$.ajax({

			url:"http://demo.pushself.com/index.php",

			success:function(d){

				if(d.result=="OK"){

					alert("生成成功！");

				}

			},

			//async:false,

			dataType:"json"

		});

		console.log(this);

	});

	</script>

</body>

</html>

php代码

<?php

	sleep(3);

	echo json_encode(array('result'=>'OK'));

?>

在注释async: false 的时候，async的默认值是true，连续点击3次测试

IE：连续输出3次<button id="testAsync">测试</button>，3秒后连续弹出3次生成成功

非IE：连续输出3次<button id="testAsync">测试</button>，3秒后依次弹出3次生成成功

如图：

在取消注释async: false 后，连续点击3次测试

IE：3秒后弹出1次生成成功，输出1次<button id="testAsync">测试</button>

非IE：3秒后依次弹出3次生成成功，输出3次<button id="testAsync">测试</button>，而且会提示：Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

如图：

如图：

看到上面的结果，暂且不说alert的事情。异步情况下，IE与非IE浏览器处理的方式是一样的。同步的时候，IE是单线程的，非IE却不是单线程处理。非IE会出现提示ajax同步请求在主线程中不利于用户体验，被弃用了，可见用户体验的重要性。

最后还是需要换取另外的方式来阻止用户多次点击:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>jquery-ajax-async</title>

</head>

<body>

	<button id="testAsync">测试</button>

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

	<script>

	var testAsyncEle = $("#testAsync"),

		createIndex = function() {

			testAsyncEle.unbind();

			$.ajax({

				url:"http://demo.pushself.com/index.php",

				success:function(d){

					if(d.result=="OK"){

						alert("生成成功！");

						testAsyncEle.bind("click", createIndex);

					}

				},

				//async:false,

				dataType:"json"

			});

			console.log(this);

		};

	testAsyncEle.bind("click", createIndex);

	</script>

</body>

</html>

jquery-ajax-async之浏览器差异的更多相关文章

  1. jQuery ajax在IE浏览器的跨域问题--jquery.xdomainrequest.min.js

    jquery.ajax 加载数据, chrome, firefox, IE10+ 都可以顺利加载数据,但是IE9及以后版本不执,通过执行 jquery.ajax error 函数显示未执行 拒绝访问. ...

  2. jQuery ajax async

    jQuery 同步调用: jQuery.ajax({ type:'POST', async: false, url:'qcTask/add', contentType:'application/jso ...

  3. jQuery Ajax async=>false异步改为同步时，导致浏览器假死的处理方法

    今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** * 异步当前用户 ...

  4. [jQuery]ajax请求导致浏览器崩溃

    $("#xxx").val() not $("#xxx") 如果忘记加上.val()会导致chrome崩溃

  5. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  6. jquery的$.ajax async使用详解

      async在jquery ajax中是一个同步参数了,我们下面来给大家介绍在jquery ajax中使用async时碰到的一些问题与方法介绍,希望例子能给各位同学带来一些帮助哦.   async默 ...

  7. jQuery ajax 当async为false时解决同步操作失败的问题

    jQuery的ajax,当async为false时,同步操作失败.解决方案,jqueryasync 最近做项目遇到jQuery的ajax,当async为false时,同步操作失败的问题,上网搜索下,得 ...

  8. jquery ajax属性async(同步异步)示例

    在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false,下面举几个jquery ajax同步和异步实例 例1.jquery+ajax/&q ...

  9. JQ,JQuery的ajax卡住了,浏览器页面卡住

    在使用ajax的时候浏览器卡住了, 经过测试是因为在ajax中使用的data数据变量写错了 不存在也不报错,直接卡主了 好好检查一下吧.

  10. jQuery Ajax使用实例

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script> <scr ...

随机推荐

  1. 窗体DataGridView控件中按回车键时,单元格向下移动,如何能改成向右移动

    方法一:protected override void OnKeyUp(System.Windows.Forms.KeyEventArgs e) { base.OnKeyUp(e); if (e.Ke ...

  2. CentOS6.5(Python-2.7.12)安装Pip

    1.安装setuptools(下载链接可从https://pypi.python.org/pypi/setuptools#code-of-conduct寻找) #Download setuptools ...

  3. which,whereis, locate, find

    which 在PATH环境变量中的路径中查找目标文件,所以用来查找都是可执行文件,Linux下的各种命令本质上就是一个可执行的文件,所以我们安装新的软件之后通常都会有相应的命令将其打开,就是因为安装的 ...

  4. ELK 信息统计分析-2

    Range 按数值类型的字段聚合统计 { "query": { "match_all": {} }, "aggs": { "ter ...

  5. Git操作指令进阶

    注意: 学习前请先配置好Git客户端 相关文章:Git客户端图文详解如何安装配置GitHub操作流程攻略 官方中文手册:http://git-scm.com/book/zh GIT 学习手册简介 本站 ...

  6. three Sum

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  7. selenium验证车贷计算器算法

    1.验证页面上的车贷计算器算的结果是否与需求中给的公式结果一致. 页面图片: 代码如下(简单实现,需要优化): package com.test; import java.math.BigDecima ...

  8. hdu-4810 Wall Painting(组合数学)

    题目链接: Wall Painting Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  9. -bash: rz: command not found

    rz,sz是Linux/Unix同Windows进行ZModem文件传输的命令行工具.优点就是不用再开一个sftp工具登录上去上传下载文件. sz:将选定的文件发送(send)到本地机器rz:运行该命 ...

  10. java 16-1 ArrayList的练习1

    需求: ArrayList去除集合中字符串的重复值(去掉相同的字符串) 分析: 第一种做法:创建一个新的空集合: A:创建1个具有相同字符串的集合 B:创建1个空的集合 C:遍历第一个集合里面的元素 ...