2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

关于 JavaScript 中同步和异步执行问题

时间:12-14来源:作者:点击数:23
城东书院 www.cdsy.xyz

在开发一个异步 AJAX 请求的时候,遇到一个意想不到的结果,我遍历一组元素,发送一个 AJAX 请求,将请求的结果载入这个元素里面,请看下面的代码:

  • $('.is_include').each(function(){
  • this_td = $(this);
  • this_td.html('查询中…');
  • $.getJSON('is_inclue.php?id='+this_td.attr('is_inclue'), function(){
  • if(data == 1){
  • this_td.html('已收录');
  • this_td.attr('is_include', '1');
  • }else{
  • this_td.html('未收录');
  • }
  • })
  • })

最后的运行结果是只有最后一个元素被更改了内容,通过浏览器的审查元素工具,可以看到确实发送了多个 AJAX,也返回了查询的结果。

问题就出在这个是异步的操作,jQuery中的 each() 方法运行速度是非常快的,就是一瞬间的事情,但是AJAX请求并不是,可能 each() 已经运行完成了,AJAX 第一个请求还没有完成,在 each() 里面,我将元素赋值给 this_td,方便后面调用,但是这个又出现了一个问题,当第一个AJAX完成以后,由于 this_td 是公用的,运行到最后就是最后一个元素,所以就只更新最后一个元素的值。

既然找到了问题,那么我们来修改下这个程序,也就是说在 AJAX 请求之前,this_td 元素的指向都是对的,但是 AJAX 后就不对了,那么我们实际上就是要找到我们发起请求的元素,我们可以给 each() 添加一个索引,然后返回的时候更新当前索引的元素。

  • $('.is_include').each(function(i){
  • this_td = $(this);
  • this_td.html('查询中…');
  • $.getJSON('is_inclue.php?id='+this_td.attr('is_inclue'), function(){
  • if(data == 1){
  • $('.is_include').eq(i).html('已收录');
  • $('.is_include').eq(i).attr('is_include', '1');
  • }else{
  • $('.is_include').eq(i).html('未收录');
  • }
  • })
  • })

其实在定时器中也会出现类似的问题,请看下面的代码:

  • for(var i = 0; i < 5; i++){
  • setTimeout(function(){
  • alert(i)
  • }, 100);
  • }

这段代码的本意是每隔100毫秒将i的值加1输出,然而这段代码并不能达到上述目的,因为i的值在循环中增加,这是一个同步时序,它在计时器事件被调用钱就已经发生了,最终计时器得到的结果是循环后的i值,也就是5次alert显示的结果都是5。

  • for(var i = 0; i < 5; i++){
  • setTimeout("alert("+i+")", 100);
  • }

可以采用了拼接字符串的方式来调用计时器,由于i在字符串运算中被替换成了当前循环时的实际常量值,所以得到了正确的结果。

实际上,比字符串更好的模式是通过闭包,所以第三段代码中,开发人员通过闭包嵌套和不同时序的执行,巧妙地得到了正确的结果,并且比第二段代码更具效率和通用性。

  • for(var i = 0; i < 5; i++){
  • (function(i){
  • setTimeout(function(){
  • alert(i)
  • },100);
  • })(i);
  • }
城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐