重构模式：用异步计算替代长计算

问题

当一个JavaScript计算进程耗时太长，浏览器会弹出警告框，不仅烦人而且一不小心就会点错导致后面的程序不被执行。

很多这类长计算是由于操作大数组造成的。虽然每个元素的处理耗时很少，当数组有几百上千个元素时整个计算时间就会长到超时。由于数组元素数不确定，对单一元素操作调优仍然不能根本解决问题。

办法

把长计算拆解成多个异步的短计算。

即使计算所需的总时间并不缩短，将阻塞的长计算拆解成异步的短计算至少带来响应性的提升：在计算进行的同时用户还可以做其他操作，而不是眼看着整个浏览器失去响应。

在拆解的基础上可以改进任务分发机制以提升整体计算时间。

步骤

• 重构原来的长计算
  • 把整个长计算抽取到一个方法中
  • 重构该方法使之呈现以下结构：

function longCalculation() {   before();   var items = getItems();   items.each(handleSingleItem);   after(); }

• 把循环重构为递归
  • 把“操作数组中所有元素”的逻辑抽取到一个递归调用的方法，使之呈现以下结构：

function handleItems(items, cur) {   if(cur == items.length - 1) {     after();     return;   }    var item = items[cur];   handleSingleItem(item);    handleItems(items, cur + 1); }  function longCalculation() {   before();   var items = getItems();   handleItems(items, 0); }

• 把针对每个元素的操作变成一个异步的计算进程──这一步很简单，只要在调用handleItems方法时始终加上delay就行。

以上。应该很容易写出一个类似于library的玩意来封装这个模式。太容易了以至于我不想写。