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

上个周日，介绍了如何使用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，并且浏览器会出现假死

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

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • JavaScript中setTimeout的那些事儿

    JavaScript中setTimeout的那些事儿

    一.setTimeout那些事儿之单线程 一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没--就是我们在编程过程中的setTimeout(类似的还有setInterval.Ajax),不是异步执行的吗?!! 例如: <!DOCTYPE html> <head> <title>setTimeout</title> <meta http-equiv="

  • JS中setTimeout()的用法详解

    JS中setTimeout()的用法详解

    setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止 计分及计秒的 counter clearTimeout Set flag 1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTimeOut()停止 1.5 计分及秒的co

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

  • javascript中SetInterval与setTimeout的定时器用法

    示例一: 查看演示 下载源码 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数. setTimeOut用法 setTimeout函数的用法如下: var timeoutID = window.setTi

  • JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

    废话不多说了,直接给大家贴代码了. // 每隔五秒定时刷新当前窗口 setTimeout("self.location.reload();",5000); //js 定时关闭窗口(ie和FF中测试过) //6秒后自动关闭当前窗口 setTimeout("window.opener=null;window.close()",6000); 下面给大家介绍下javascript定时器使用 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方

  • Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时");window.clearTimeout(tmid); 举例说明: A.当要执行的方法中不需要参数时 复制代码 代码如下: <scr

  • JavaScript window.setTimeout() 的详细用法

    js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅资料.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别 说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧! setTimeo

  • 快速掌握Node.js中setTimeout和setInterval的使用方法

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行

  • JS延迟加载(setTimeout) JS最后加载

    第一 JS延迟加载 复制代码 代码如下: <script language="JavaScript" src="" id="my"></script> <script> setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 </script> 一般情况下都是利用setT

  • js函数setTimeout延迟执行的简单介绍

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示: setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout().实例: 复制代码 代码如下: function timed

随机推荐