Question

每30ms调用一次此函数

function draw(){
    context.clearRect(0, 0,canvas.width, canvas.height);

    context.drawImage(displayme, plot.position.x, plot.position.y, plot.width, plot.height);    
}

和一些鼠标事件修改displayme.src并绘制位置

但是当加载新的src时，所有其他javascript被阻止并且无法移动（先前加载的）图像

我也尝试过使用不同的Image对象并将其分配给“displayme”但它不起作用

欢迎任何帮助

Answer 1

AFAIK所有浏览器都在一个线程中运行javascript。您可以使用setTimeout()使其立即返回此功能，但在该功能实际运行时，浏览器将不会在页面上运行任何其他JavaScript。这模拟了多线程，但它不应该被误解为真实的东西。

function draw(){
    // allows immediate return and "schedules" the anonymous function next
    setTimeout( function() {
        context.clearRect(0, 0,canvas.width, canvas.height);
        context.drawImage(displayme, plot.position.x, plot.position.y,
                                     plot.width, plot.height);
    },0);
 }

javascript无阻塞图片加载？

1 个答案: