Question

我有一个jquery滑块（v 1.8.16），它会触发在slide事件上重绘canvas元素。在FireFox和Chrome中，画布绘图大约需要40毫秒。

幻灯片事件的代码片段如下所示 - 非常基本：

    $( $rSlider).on( "slide", function( event, ui ) {
        DrawAllDataSets(ui.value);

    } );

问题是滑块在FireFox中“卡住”，直到滑块鼠标事件停止（即滑块不再移动），然后一系列“滑动”事件流过。在Chrome＆amp; IE滑块事件立即流过，滑块在用户拖动时响应，并相应地绘制画布。

如果删除了DrawAllDataSets功能，滑块会在FireFox中正常响应。

我最初的想法是画布画的时间太长了，但40毫秒与铬相当，即看似合理。

任何想法都表示赞赏。

Answer 1

如果您要为滑块触发的每个事件请求绘制更改循环，那么您可能很容易遇到累积绘图循环。

例如，触发滑块移动的鼠标移动通常每秒发射30-40次。所以做数学：1000ms / 40events = = 25ms之间被触发的滑块事件。

因此，如果您的绘图需要40毫秒，您可能很容易请求太多的绘制画布以便跟上（因此滑块会冻结，直到画布可以赶上）。

一种解决方案是设置所需的绘图属性以响应滑块事件，但不会立即触发重绘。

然后创建一个单独的requestAnimationFrame循环，该循环仅根据最新的绘图属性进行绘制。循环不会尝试绘制滑块设置的每个更改，它只会绘制最新的更改。