珠峰培训javascript技术与前端技术论坛

 找回密码
 立即注册
查看: 968|回复: 4

async JQ 的同步和异步 差别 或者会出现什么问题

[复制链接]

1

主题

5

帖子

23

积分

新手上路

Rank: 1

积分
23
发表于 2016-6-30 17:18:59 | 显示全部楼层 |阅读模式
希望老师能写个demo 详细解释下我可以运行看看。谢谢了

回复

使用道具 举报

0

主题

4

帖子

16

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
16
发表于 2016-6-30 22:03:51 | 显示全部楼层
本帖最后由 张仁阳 于 2016-6-30 22:10 编辑

jquery ajax属性async(同步异步
在jquery的ajax中如果我们希望实现同步或者异步时我们可以直接设置async属性为false和true      
同步执行
当把async设为false时,这时ajax的请求时同步的
也就是说,这个时候ajax块发出请求后,他会等待在load()这个地方,不会去执行after()
直到load()部分执行完毕。   
前台           
  1. <script src="//cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
  2. <script>
  3.     function load(msg) {
  4.         console.log(msg);
  5.     }
  6.     function after(){
  7.         console.log('after');
  8.     }
  9.     $.ajax({
  10.         url: '/ajax',
  11.         method: 'GET',
  12.         async: false
  13.     }).success(function(result){
  14.         load(result);
  15.     });
  16.     after();
  17. </script>
复制代码

后台           
  1. var http = require('http');
  2. var fs = require('fs');
  3. http.createServer(function(req,res){
  4.     if(req.url == '/sync'){
  5.         fs.createReadStream('sync.html').pipe(res);
  6.     }else if(req.url == '/ajax'){
  7.         setTimeout(function(){
  8.             res.end('ok');
  9.         },5000);
  10.     }else{
  11.         res.end('Not Found');
  12.     }
  13. }).listen(8080);
复制代码

异步执行
在这里,async默认的设置值为true,这种情况为异步方式
就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success
也就是说这时候执行的是两个线程,ajax块发出请求后一个线程和ajax块后面的脚本(另一个线程)      

后台           
  1. var http = require('http');
  2. var fs = require('fs');
  3. http.createServer(function(req,res){
  4.     if(req.url == '/sync'){
  5.         fs.createReadStream('sync.html').pipe(res);
  6.     }else if(req.url == '/async'){
  7.         fs.createReadStream('async.html').pipe(res);
  8.     } else if(req.url == '/ajax'){
  9.         setTimeout(function(){
  10.             res.end('ok');
  11.         },5000);
  12.     }else{
  13.         res.end('Not Found');
  14.     }
  15. }).listen(8080);
复制代码

前台           
  1. <script src="//cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
  2. <script>
  3.     function load(msg) {
  4.         console.log(msg);
  5.     }
  6.     function after(){
  7.         console.log('after');
  8.     }
  9.     $.ajax({
  10.         url: '/ajax',
  11.         method: 'GET',
  12.         async: true
  13.     }).success(function(result){
  14.         load(result);
  15.     });
  16.     after();
  17. </script>
复制代码


   
  
回复 支持 反对

使用道具 举报

1

主题

5

帖子

23

积分

新手上路

Rank: 1

积分
23
 楼主| 发表于 2016-7-1 10:35:23 | 显示全部楼层
张仁阳 发表于 2016-6-30 22:03
jquery ajax属性async(同步异步
在jquery的ajax中如果我们希望实现同步或者异步时我们可以直接设置async属 ...

谢谢张仁阳老师的详细解释   我好好看看
回复 支持 反对

使用道具 举报

1

主题

5

帖子

23

积分

新手上路

Rank: 1

积分
23
 楼主| 发表于 2016-7-4 12:46:15 | 显示全部楼层

如果改成这样会发送好多次请求,console.log()和alert()...

本帖最后由 梁居毅_201602 于 2016-7-4 12:49 编辑
张仁阳 发表于 2016-6-30 22:03
jquery ajax属性async(同步异步
在jquery的ajax中如果我们希望实现同步或者异步时我们可以直接设置async属 ...

<script>
    function load(msg) {
        console.log(msg);
    }
    function after(){
        console.log('after');
    }
    function  send(){
        $.ajax({
            url: '/ajax',
            method: 'GET',
            async: false
        }).success(function(result){
            console.log('success');
        });
    }

    send();send();
    //
    after();
</script>
回复 支持 反对

使用道具 举报

1

主题

5

帖子

23

积分

新手上路

Rank: 1

积分
23
 楼主| 发表于 2016-7-4 12:53:23 | 显示全部楼层
梁居毅_201602 发表于 2016-7-4 12:46
function load(msg) {
        console.log(msg);
    }

如果把console.log(),换成又换成alert()。弹窗肯定有确认按钮。无论同步异步每次点击都发送好多次请求。怎么解决呢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|珠峰培训--JavaScript培训

GMT+8, 2017-9-22 15:48 , Processed in 0.137638 second(s), 20 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表