代码之家 › 专栏 › 技术社区 › brabster

如何在IE7中控制Javascript线程和重绘

concurrency javascript

brabster · 技术社区 · 15 年前

我已经在一个函数中定义了一系列Javascript函数调用,这些函数将在web文档准备就绪时执行。我原以为它们会按顺序执行,一个结束,另一个开始,但我看到的行为与之不符。

此外,在调用之间还有对图形组件的操作(例如,我添加了一个检查点时间,以便在页面上的div上绘制每个提到的调用之间的div),但是这些重绘并不是按顺序进行的。。。它们都是同时发生的。

我对浏览器中的整个javascript有点不熟悉,是我犯了一个明显的错误,还是一个很好的资源去了解如何做这些事情?

更新-示例

// called onReady()
function init() {
    doFirstThing();
    updateDisplayForFirstThing();
    doSecondThingWithAjaxCall();
    updateDisplayForSecondThing();
    ...
    reportAllLoaded();
}

3 回复 | 直到 15 年前

lincolnk 15 年前

在当前脚本运行完成之前,IE不会更新显示。如果要在一系列事件中重新绘制,则必须使用超时来中断脚本。

编辑:下面是一个通用的模式。

function init() { 
    doFirstThing(); 
    updateDisplayForFirstThing(); 
} 

function updateDisplayForFirstThing() {
    // existing code
    ... 

    // prepare next sequence
    var nextFn = function() {
        // does this method run async? if so you'll have to 
        // call updateDisplayForSecondThing as a callback method for the 
        // ajax call rather than calling it inline here.
        doSecondThingWithAjaxCall(); 

        updateDisplayForSecondThing();     
    }

    setTimeout(nextFn, 0);
}

function updateDisplayForSecondThing() {
    // existing code
    ... 

    // prepare next sequence
    var nextFn = function() {
         // continue the pattern 
         // or if you're done call the last method
         reportAllLoaded(); 
    }
    setTimeout(nextFn, 0);
}

Daniel Mendel 15 年前

在许多情况下,可以使用回调

function doFirstThing(fn){
  // doing stuff
  if(typeof fn == 'function') fn();
}

function updateDisplayForFirstThing(){
  // doing other stuff
}

function init(){
  doFirstThing(updateDisplayForFirstThing);
}

另一个选项是使用返回值:

function doFirstThing(fn){
  // doing stuff
  if(x) return true;
  else return false;
}

function updateDisplayForFirstThing(){
  // doing other stuff
  return true;
}

function init(){
  if(doFirstThing()){ updateDisplayForFirstThing(); }
}

但是,有时仍然需要使用 setTimeout

Xaxis 15 年前

如果您最终决定使用JavaScript线程,请查看仍在起草的 Web Workers API . 尽管API是在大多数现代web浏览器中实现的,但对浏览器的支持是有得有失的。

问:你到底是如何确定“医生准备好”的?IE中不支持DOMContentLoaded事件我很确定。。。如果您需要等待文档全部加载,可以使用以下方法:

var onReady = function(callback) {
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", callback, false);
        return true;
    } else if (document.attachEvent) {
        var DOMContentLoaded = function() {
            if (document.readyState === "complete") {
                document.detachEvent("onreadystatechange", DOMContentLoaded);
                onReady();
            }
        };
        return true;
    }
};

当然,在继续执行其余代码之前,您需要为某些标志状态开发一个setTimeout测试,这些标志状态指示页面在完成时已加载。。。或者其他方法。。。

或者你可以把剧本放在你身体的底部。。。