Question

借助jQuery库和offset（）方法，通过编写这个简单的代码，元素将逐渐改变位置似乎是合乎逻辑的

for (i = 0; i < 900; i = i + .5) { 
    $('#moving-element').offset({ top: i })
}

浏览器将停止一段时间并最终将元素移动到距离顶部900px的位置，不会观察到任何转换。出于好奇，我写了这个：

for (i = 0; i < 900; i = i + .5) { 
    $('#moving-element').offset({ top: i }); 
    console.log(i)
}

看到控制台正在输出连续的数字，但只有在for循环结束后它才会偏移元素。

为什么这不会在代码执行时逐渐完成？

Answer 1

因为javascript是单线程事件建模运行时（至少在当前版本中）。

这意味着当您运行for循环时，其他任务无法运行。这意味着接受用户输入，更新屏幕等。因此循环完全运行，然后显示最终结果。

Answer 2

问题是javascript是单线程的，它在处理时会阻塞ui和事件队列。您需要使用setTimeout或其他一些异步流控制机制来生成绘图任务以粘贴到事件循环中，以便浏览器在执行动画时可以执行其他操作。

// Our animate function changes the offset, waits a while, then repeats
function animate(n) {
    // Change the offset to the passed in value
    $('#moving-element').offset( {top: n});

    // If the passed in value is equal to 900, stop exection
    if (n === 900)
        return;        

    // Otherwise, set a timer which will trigger our animate function again
    // after 10 milliseconds
    setTimeout(function() {
        // Increment n when passing it into our function
        animate(n++):
    }, 10);
}

// Call the function to begin with
animate(0);

Here is a JSFiddle example，它会让您了解for循环有多快。点击按钮后，for循环将开始执行，只有当它达到第一百万次迭代时才会在屏幕上显示警告。

为什么我们不能使用for循环来创建动画？

2 个答案: