神奇的setTime(func, 0)

背景:
在一个页面中我们需要利用动态创建iframe并添加相应的CSS文件来实现网页的局部打印, 于是就有了下面这段代码:

      $printDetailFrame = $(‘<iframe>‘, {

                           src: "",

                           id:  "printFrame",

                           frameborder: 0,

                           scrolling: "no",

                           style: "display:none"

                          }).appendTo("body")

紧接着我们再把CSS添加到这个动态创建的iframe,

   $printCSSReset = $("link[href*=‘reset.css‘]").clone(),

   $printCSSReports = $("link[href*=‘reports.css‘]").clone(),

   $printCSSUnf = $("link[href*=‘unf.css‘]").clone();

   $printDetailFrame

    .contents()

     .find("head")

      .append($printCSSReset,$printCSSReports,$printCSSUnf);

发现问题:
到目前为止， 一切都看起来很正常， 然后在需要打印时候

//把要打印的区域加入到iframe内部

......

$printDetailFrame.get(0).contentWindow.print()

原来我们忽略了一个问题:
我们在添加CSS代码是在创建iframe之后立即运行的， 但是我们并不能保证iframe已经在页面DOM上创建完成了, 若是在没有创建好iframe的情况下, 在iframe上添加CSS链接就是一个没有实际运行结果的代码， 因为这时候根本就找不到那个iframe. 如何解决呢？ 这时候就该我们的主角setTimeout登场了。

解决:
我们把添加CSS那段代码放入一个setTimeout里面, 如下:

  setTimeout(function(){

   $printDetailFrame

    .contents()

     .find("head")

      .append($printCSSReset,$printCSSReports,$printCSSUnf);

  }, 0);

分析:
当我们在页面上动态创建一个iframe时候, 实际上是通知浏览器内核页面渲染进程去创建, 并在js自己的事件列队中插入了一个回调等待， 但是js把这个事情抛给浏览器后就直接继续运行下面的添加CSS代码， 或许是每个浏览器进程调度机制不同， 在firefox就出现了我们上面说的这个问题, 那么ssetTimeout(func, 0)是起到了什么作用呢? 它其实就是把func这个方法加入到事件列队中，这样等iframe在页面上创建完毕， js队列就寻找下个回调也就是func这个函数来运行， 这样我们就让这两个有依赖关系的操作按顺序进行.

参考阅读:

http://blog.csdn.net/kongls08/article/details/6996518

http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful

最后的补充:
我们也可以尝试利用jQuery的deffered机制来代替setTimeout, 但这个还需要测试才能确定可行性:

  $printDetailFrame.promise().done(function(){

   $printDetailFrame

    .contents()

     .find("head")

      .append($printCSSReset,$printCSSReports,$printCSSUnf);

  });