创建jquery可拖动“停止”回调在for循环 [英] Creating jquery draggable "stop" callbacks in a for loop

问题描述

我有一个for循环通过可变数量的draggable元素，为每个元素创建一个stop-event回调。回调函数需要知道它所链接的项的索引。

I have a for loop iterating through a variable number of draggable elements, creating a stop-event callback for each. The callback function needs to know the index of the item that it is linked to.

我遇到了我认为是一个闭包问题：当回调被触发，传递给回调（_x）的循环迭代器索引变量的状态是循环迭代器索引的最后一个值，而不是定义回调函数时迭代器索引的值。一些coffeescript如下：

I've encountered what I think is a closure problem: when the callbacks are fired off, the state of the loop iterator index variable that gets passed to the callback (_x) is the last value of the loop iterator index, rather than the value of that iterator index at the time the callback function was defined. Some coffeescript below:

for _x in [0..total]
  $(window).ready $(".draggable-#{_x}").draggable
    cursor: 'move'
    handle: ".draggable-image-move-button-#{_x}"
    containment: 'div#banner-builder-preview'
    stop: =>
      alert "x === #{_x}"

警报提示将总是打印x === total + 1而不是x === 0，x === 1...等。

In the example above, the alert prompt will always print "x === total+1" rather than "x === 0", "x === 1"... etc.

将唯一索引传递给具有停止事件的每个元素的回调的最佳解决方案是什么？我更喜欢这样做，而不诉诸另一个jquery选择器从从回调中触发的任何元素中提取更多的数据。

What's the best solution to pass a unique index to the callback for each of the elements that have a stop event? I would prefer to do this without resorting to yet another jquery selector to pull more data from whatever element fired off the callback.

UPDATE：

我现在遇到的另一个问题是：我的回调，在for循环中，不能看到文件中定义的其他函数。我认为这很奇怪，即使定义发生在for循环之前，用于创建匿名回调函数。

Another problem I'm now running into: my callback, within the for loop, cannot see other functions defined in the file. I think that's very odd, even if the definition happens before the for loop is used to create the anonymous callback functions.

例如：

for _x in [0..total]
  do (_x) ->
    $(window).ready $(".draggable-#{_x}").draggable
      cursor: 'move'
      handle: ".draggable-image-move-button-#{_x}"
      containment: 'div#banner-builder-preview'
      stop: =>
        someFunction _x  # ... this line throws an exception, not defined
        alert "x === #{_x}

推荐答案

问题是你的回调：

stop: =>
  alert "x === #{_x}"

全部结束引用 _x ，但他们不评估 _x ，直到它们被调用。 _x 的值为 total + 1 ，这是CoffeeScript具有 do 关键字来帮助：

all end up referencing _x but they don't evaluate _x until they get called. By the time that happens, _x has the value total + 1. This is such a common issue that CoffeeScript has the do keyword to help:

当使用JavaScript循环生成函数时，通常插入一个闭包，以确保循环变量被关闭，所有生成的函数不仅仅共享最终值。CoffeeScript提供 do 关键字，它立即调用传递的函数，转发任何参数。

When using a JavaScript loop to generate functions, it's common to insert a closure wrapper in order to ensure that loop variables are closed over, and all the generated functions don't just share the final values. CoffeeScript provides the do keyword, which immediately invokes a passed function, forwarding any arguments.

$ b b

所以你可以这样说：

So you can say this instead:

for _x in [0..total]
  do (_x) ->
    $(window).ready $(".draggable-#{_x}").draggable
      #... as before

这篇关于创建jquery可拖动“停止”回调在for循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！