多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题

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

方案一:

setInterval会消耗网页内存,如果不清理会一直消耗直到网页卡死。

解决办法:

先清除定时器再创建一个定时器

clearInterval(t);

t=setInterval(ajax,10000);

方案二:(等价于同步)

使用JQuery Deferred对象。
var getWordCount = function(。。。){
        var defer = $.Deferred();
        var urlStr = "postcommit.html?I_SOURCE=getxliff";
        $.ajax({
            url : urlStr,             //async : false,表示异步执行。
            success: function(dataStr){
                      defer.resolve(dataStr);
            }
        });        
        return defer.promise();
   }

var myTotalprice = function(。。。){
                           //当getWordCount() 执行完成后,执行done()以下操作。就跟同步效果一样。
                          $.when(getWordCount(。。。)).done(function(dataStr){
                                       alert(dataStr);
                           });                   
   }

方案三:

参考地址:https://www.jianshu.com/p/55448bc08961

使用web worker:

var worker = new Worker('worker.js');//必须是同域的

worker.postMessage(msg);//主页面向worker发消息。msg可以是对象,字符串之类。

onmessage = function(evt) {// 处理主页面发来的消息
    postMessage('reveive data ' + evt.data + 'from page');// 向主页面发消息
}

worker.terminate();

方案四:

长连接方式实现:xmlhttp池

ajax 多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题的更多相关文章

  1. JavaScript———从setTimeout与setInterval到AJAX异步

    setTimeout与setInterval执行 首先我们看一下以下代码打印结果 console.log(1); setTimeout(function() { console.log(2); },1 ...

  2. setInterval调用ajax回调函数不执行的问题

    setInterval调用ajax回调函数不执行 1.首先检查你的setInterval()函数写法是否正确 参考写法 // 检查是否支付成功 var isPayRequest=false; var ...

  3. Ajax详解及其案例分析------如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

  4. Query通过Ajax向PHP服务端发送请求并返回JSON数据

    Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...

  5. 从零开始学 Web 之 Ajax(五)同步异步请求,数据格式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)

    一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...

  7. Ajax请求参数较长导致请求失败

    Ajax请求参数比较长,第5行参数大概1100个字符吧,是接口的请求报文. $.ajax({ type:"POST", url:"${ctx}/test.action?m ...

  8. 前端通信:ajax设计方案(七)--- 增加请求错误监控、前端负载均衡以、请求宕机切换以及迭代问题修复

    距离上个迭代过了很长时间,中间经历了很多事情,也在每个空余时间构思了这个迭代的东西以及下个迭代要做的东西.时间周期稍微长了,望见谅. 而且,至今这个开源库的start也已经到了165个了,会支持关注和 ...

  9. jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...

随机推荐

  1. 利用maven实现差异化配置

    回顾过去 生产环境,测试环境,开发环境在不同的环境下会有各种各样的配置,比如数据库链接地址,账户名,密码等等.不同环境下都需要配置,但是配置却又不同.以前分享过一篇文章,介绍了我之前A公司的差异化配置 ...

  2. Synchronized块同步变量的误区

    我们可以通过synchronized块来同步特定的静态或非静态方法.要想实现这种需求必须为这些特性的方法定义一个类变量,然后将这些方法的代码用synchronized块括起来,并将这个类变量作为参数传 ...

  3. Docker常用操作命令

    docker 常用管理命令 修改镜像地址 sudo tee /etc/docker/daemon.json <<-'EOF' { "registry-mirrors": ...

  4. Django中的DRF框架视图集使用

    1. 两个基类 1)APIView Django REST_framework 中所有视图的基类是APIView   父类是View 支持定义的属性: authentication_classes 列 ...

  5. MySQL数据库篇之pymysql模块的使用

    主要内容: 一.pymysql模块的使用 二.pymysq模块增删改查 1️⃣  pymsql模块的使用 1.前言:之前我们都是通过MySQL自带的命令行客户端工具mysql来操作数据库, 那如何在p ...

  6. Solr集群—SolrCloud

    1.   学习计划 1.solr集群搭建 2.使用solrj管理solr集群 3.把搜索功能切换到集群版 2.   什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜 ...

  7. Android开发实战之底部Dialog弹出效果

    在Android开发中,有很多情况下我们需要使用到对话框,遗憾的是,安卓自带的对话框样式不能满足我们实际的需要,所以往往需要我们自定义对话框,具体做法:写一个对话框继承自Dialog实现他的一个构造方 ...

  8. 【POJ1222】EXTENDED LIGHTS OUT

    参考博客 https://blog.csdn.net/so_so_y/article/details/76098713 题意 有一些灯泡组成了5*6的方阵.每个开关(开关会使灯泡的状态发生变化)除了控 ...

  9. JLRoute 使用

    http://zhoulingyu.com/2016/01/03/iOS%E2%80%94%E2%80%94Scheme%E6%98%AF%E4%BB%80%E4%B9%88%E3%80%81%E6% ...

  10. jquery入门 动态调整div大小,使其宽度始终为浏览器宽度

    有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...