javascript - 浏览器在函数执行期间停止响应事件，中断 "draggables"

Question

我有一个有点像这样的 slider :

             ________
------------|        |---------------------------------------
   :    <-- | slider | -->    :        :        :        :
------------|________|---------------------------------------

我使用 jQuery UI 使 slider 可拖动。这工作得很好。

问题是每次 slider 穿过部分边界(由 : 指示)时我都会执行一个函数。该函数执行大约需要 30 毫秒(它构建一个 DocumentFragment 并将其插入到文档中)。在此期间，浏览器不会响应事件，因此 jQuery UI 停止调整 slider 的位置，并且拖动提前结束(用户被迫释放鼠标按钮并开始新的拖动)。这使得 slider 感觉不稳定且有问题。

这个问题有解决办法吗？

编辑:我创建了一个简单的 fiddle这说明了问题所在。请注意，虽然拖动在执行慢速函数期间基本上暂停，但随后会恢复。这让我怀疑我的更复杂的场景中存在一些问题，导致拖动事件被缩短(也许 DOM 操作导致 slider 的位置短暂改变)。

编辑:经过进一步调查，我更接近理解这个问题了。 DOM 操作代码包含类似 $('.droppable').remove() 的行。在分离绑定(bind)到匹配元素的任何事件处理程序并删除任何关联数据后，这将从 DOM 中删除匹配元素。如果我使用 .detach() ，则行为与上面的简单 fiddle 相同。清理过程中发生了一些异常情况。

Answer 1

我建议使用 jQuery 或 Underscore 的 debounce 函数或某些等效方法，每 100 或 200 毫秒左右调用一次该函数。

这不会让事情变得顺利，但至少他们不会感到有问题。

Interesting article关于它。