js中setTimeout的妙用--防止循环超时


Posted in Javascript onMarch 06, 2017

上个周日,介绍了如何使用setTimeout代替setInterval进行间歇调用,这个周日,继续来讲《JavaScript高级程序设计》这本书里面,对于setTimeout的另一种妙用——防止循环超时

 【这是铺垫,为故事的高潮埋下伏笔】

JS是单线程的,一个代码块里面的代码,只能按顺序从上到下执行,所以如果中间有一块代码,执行起来非常耗时,就会导致下面的代码无法执行,出现浏览器假死的状态。

JS的耗时操作,常见的有两种  1.向服务器发起请求   2.对数组的循环操作  (当然,还有一种,就是把1和2合在一起,叫做  在循环操作里面向服务器发出请求,哈哈哈,实际项目里面经常有人这么干)

解决这两种耗时操作的思路都是一样的——异步编程。JS的异步编程,并不是多线程,因为正如上面所说的,JS是单线程的。JS的异步,直观上的理解,就是延时和回调

对于第一种耗时情况,我们采用的是ajax异步请求,待耗时的请求返回结果时,进行回调操作。

对于第二种耗时情况,则可以使用本文即将介绍的方法,setTimeout延时调用,进行数组分块处理

【这才是高潮】

假设我们要处理一个大小为100的数组,对于数组中每个元素,都需要执行大量的处理,每个元素大约需要1s的处理时间;

并且我们认为,程序后面的代码,不会依赖于我们对这个数组的处理结果。

于是就有了下面这段代码,以两种方式来处理这个数组,一种是常规方式,一种是setTImeout的数组分块处理

var processTime = 0;
//常规操作
tcCircle();
//注释上面的代码 放开下面注释 以执行setTimeout数组分块操作
//tcCircleUseSetTimeout();
//time consuming circle
function tcCircle(){
  var arr = new Array(100);
  for(var i=0;i<arr.length;i++){
    process(arr[i]);
  }
  //页面标题栏一直转圈 且下面的语句迟迟无法执行
  console.log("important process");
  console.log("finish!");
}
function tcCircleUseSetTimeout(){
  var arr = new Array(100);
  setTimeout(function(){
    var ele = arr.shift();
    process(ele);
    if(arr.length>0){
      setTimeout(arguments.callee,100);
    }
  },100);
  console.log("important process");
  console.log("finish!");
}
function process(ele){
  console.log("process"+(++processTime));
  //模拟长时间的处理过程
  sleep(1000);
}
function sleep(sleepTime){
  var start=new Date().getTime();
  while(true){
    if(new Date().getTime()-start>sleepTime){
      break;  
    }
  }
}

首先我们执行常规的操作,由于是单线程,可想而知,执行完这段程序,至少要 1*100 = 100s,并且浏览器会出现假死

js中setTimeout的妙用--防止循环超时

然后我们执行setTimeout方式的方法,setTImeout的方式,我们每次只操作数组里面的一个对象,并且在每次操作之间,设置了100ms的延时,供js引擎执行主干的代码,因此,很明显,执行的效果非常棒!

js中setTimeout的妙用--防止循环超时

我们看到,不仅浏览器的标题栏不会转菊花了,控制台也很快就打印出 我们在代码最后面打印的语句,说明主干程序已经走完,数组的处理则定时执行着。

通过这样的优化,我们的程序给用户的体验提示了许多,当然,这里只是书中介绍的一种方法,我相信还有很多其他实现方式,比如我现在可以想到的就有promise,有机会我会补充一下,大家也可以畅所欲言,看看有什么其他更好的方法来对付这种循环耗时操作!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
详解cordova打包成webapp的方法
Oct 18 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
Bootstrap表单简单实现代码
Mar 06 #Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 #Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 #Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 #Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 #Javascript
Bootstrap导航中表单简单实现代码
Mar 06 #Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 #Javascript
You might like
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
php简单静态页生成过程
2008/03/27 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
javascript 模拟点击广告
2010/01/02 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python hash每次调用结果不同的原因
2019/11/21 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
上课迟到检讨书100字
2014/01/11 职场文书
会议接待欢迎词
2014/01/12 职场文书
代理班主任的自我评价
2014/02/04 职场文书
员工工作表现评语
2014/04/26 职场文书
安全教育演讲稿
2014/05/09 职场文书
幼儿园小班教学反思
2016/03/03 职场文书