Question

window.onload = ->

  boxOrig1 = 10
  boxOrig2 = 30
  canvasW = 400
  canvasH = 300

  ctx = $("#canvas")[0].getContext('2d');

  draw = (origin,dimension) ->    
    ctx.clearRect(0, 0, canvasW, canvasH)
    ctx.fillStyle = 'rgb(200,0,0)'  
    ctx.fillRect(origin + boxOrig1, boxOrig1, dimension, dimension)  
    ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'  
    ctx.fillRect(origin + boxOrig2, boxOrig2, dimension, dimension)

  for m in [10..100] by 10
    t = setTimeout (-> draw(m, 150)), 1000 
    t.clearTimeout
#     draw(m,150)
#     alert m

作为练习，上面的代码是在画布上绘制一个小设计，暂停一秒，然后再向右重绘10个像素。

我可以看到，当我用警报中断循环时，机制工作正常（就像在最后两条注释行中那样），但是我没有使用setTimeout函数获得预期的行为。设计只是在超时后出现在最右边的位置，跳过两者之间的增量步骤。

我从其他例子中尝试了许多不同的方法，但它只是在融化我的大脑。有什么建议吗？

Answer 1

Geoff概述了一种方法（使用setInterval并从回调中清除它），因此我将概述另一种方法：使用回调中的setTimeout。像

这样的东西

m = 10
do drawCallback = ->
  draw m, 150
  m += 10
  setTimeout drawCallback, 1000 unless m > 100

请注意，您应该注意的两种方法之间存在细微的时间差异：setInterval func, 1000将每1000毫秒运行一次该函数;链式setTimeout将在每个函数调用之间延迟1000ms。因此，如果draw花了100毫秒，那么链式setTimeout将等同于setInterval func, 1100。这可能没关系，但值得注意。

奖励方法：您没有放弃循环;您可以立即设置所有超时：

for m in [10..100] by 10
  do (m) ->
    setTimeout (-> draw(m, 150)), 100 * m

do (m)是必要的，因此传递给setTimeout的闭包会看到m的每个值，而不仅仅是循环中的最终值。有关详细信息，请参阅我的文章A CoffeeScript Intervention。

最后：我知道这一切看起来都很混乱，但JS中的时间实际上非常简单，因为语言是单线程的。这意味着，在循环期间，使用setTimeout或setInterval或任何其他异步函数计划的事件将永远不会发生，即使循环是无限的。它们仅在所有代码完成执行后发生。我在my book on CoffeeScript中更详细地讨论了这个问题。

Answer 2

这可以更直观地表达为setInterval：

window.onload = ->

  boxOrig1 = 10
  boxOrig2 = 30
  canvasW = 400 
  canvasH = 300 

  ctx = document.getElementById("canvas").getContext('2d')

  draw = (origin,dimension) ->
    ctx.clearRect(0, 0, canvasW, canvasH)
    ctx.fillStyle = 'rgb(200,0,0)'
    ctx.fillRect(origin + boxOrig1, boxOrig1, dimension, dimension)
    ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'
    ctx.fillRect(origin + boxOrig2, boxOrig2, dimension, dimension)

  count = 10
  timer = setInterval (-> 
    if count == 100
        clearInterval(timer)
    draw(count, 150); count+=10
  ), 1000

如何在循环中的Coffeescript中使用setTimeout

2 个答案: