浏览器在函数执行期间停止响应事件，打破“draggables”

Question

我有一个像这样的滑块：

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

我使用jQuery UI使滑块可拖动。这很好。

问题在于，每次滑块越过剖面边界（由:表示）时，我都会执行一个函数。该函数大约需要30ms才能执行（它构建一个DocumentFragment并将其插入到文档中）。在此期间，浏览器不响应事件，因此jQuery UI停止调整滑块的位置并且拖动过早结束（用户被迫释放鼠标按钮并开始新的拖动）。这使得滑块感觉不稳定和有缺陷。

这个问题有解决方法吗？

修改：我创建了一个简单的fiddle来演示问题。请注意，虽然在执行慢速函数期间拖动基本上暂停，但它会在之后恢复。这让我怀疑我的更复杂的情况是什么导致拖拽事件被缩短（可能是DOM操作导致滑块的位置短暂改变）。

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

Answer 1

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

这不会让事情顺利进行，但至少他们不会感到错误。

Interesting article关于它。