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

梁居毅_201602

希望老师能写个demo 详细解释下我可以运行看看。谢谢了

张仁阳

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>

复制代码

   
  

梁居毅_201602

张仁阳 发表于 2016-6-30 22:03
jquery ajax属性async(同步异步
在jquery的ajax中如果我们希望实现同步或者异步时我们可以直接设置async属 ...

谢谢张仁阳老师的详细解释   我好好看看

梁居毅_201602

张仁阳 发表于 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>

梁居毅_201602

梁居毅_201602 发表于 2016-7-4 12:46
function load(msg) {
        console.log(msg);
    }

如果把console.log（），换成又换成alert（）。弹窗肯定有确认按钮。无论同步异步每次点击都发送好多次请求。怎么解决呢