原因

        浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使我的DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线程阻塞,不给它执行的时间,这就是代码失效的原因。

        就是说同步会卡住代码块

解决方式

1.async: true

  将ajax模式改为异步运行

2.setTimeout

      例子:如果需要弹出一个gif图片,并且图片一直在旋转,提示更新中,你会发现图片虽然会显示,但是图片却是不动的,那是因为虽然同步请求延迟执行了,但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼,连gif图片都不动了,看起来像一张静态图片一样。结论很明显,setTimeout治标不治本,相当于把同步请求“稍稍”异步了一下,接下来还是会进入同步的噩梦,阻塞线程,这种方法只适合发请求之前操作简单的时间短的情况.

function flog() {
        setTimeout(function(){
            $.ajax({
                url:'URL',
                type:'post',
                async:false,
                data:{
                    //传参
                },
                success:function(json){
                    //返回数据进行处理
                }
            });
        },0) 
    }

3. Deferred

使用1.5版以后的jQuery,1.5版以后的jQuery引入了Deferred对象,用Deferred对象替代async:false;

var flog = $.Deferred();
$.ajax({
    url : 'www/cctv/com.action',            
    //async : false,
    //原来设置的同步要注释掉
    success: function(backData){
        flog .resolve(backData)
    }
});        
return flog .promise();

更多推荐