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 相关文章推荐
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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(二)
2012/03/21 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
Node.js编码规范
2014/07/14 Javascript
JS中Location使用详解
2015/05/12 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
如何让你的JS代码更好看易读
2017/12/01 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
对于Python装饰器使用的一些建议
2015/06/03 Python
Python作用域用法实例详解
2016/03/15 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
python生成器推导式用法简单示例
2019/10/08 Python
python中count函数简单的实例讲解
2020/02/06 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
J2EE面试题
2016/03/14 面试题
控制工程专业个人求职信
2013/09/25 职场文书
家佳咖啡店创业计划书
2013/12/27 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android