javascript - 我是否正确使用了Underscore的throttle方法？

Question

我正在尝试通过 Flot 在图表中创建一条可拖动的线。我有一个函数可以完成此任务，并在某个 bool 值为 true 时在 Flot 的 Plothover 事件(类似于 mouseMove 事件)上执行。该函数被连续调用，这导致生成的动画显着滞后。为了解决这个问题，我尝试了两种方法:

首先我尝试使用setTimeout。这有助于函数更好地运行，但我并不满意。如果网页打开超过一分钟，动画又开始滞后，我不知道为什么。如果有人知道这是怎么回事，任何见解将不胜感激。

其次，我尝试了Underscore的节流功能。我对语法有点不确定，经过一些研究和调试，这就是我所确定的。以下代码位于事件处理程序内:

var throttled1 = _.throttle(singleLine, 50);
throttled1(position);

其中 singleLine 是以下函数，在事件处理程序外部定义:

function singleLine(position) {
      adjustLine1[0] = [position, Number.NEGATIVE_INFINITY];
      adjustLine1[1] = [position, Number.POSITIVE_INFINITY];
      graphData.push({ data: adjustLine1, lines: { show: true }, color: "gray" });
      plot.setData(graphData);
      plot.draw();
      graphData.pop();
}

请记住，plot.draw() 是一个相当长的函数(它重绘整个图表)。不管怎样，它似乎可以工作，因为 singleLine 被throttled1(position)成功调用。然而，它根本没有提高性能。我使用正确吗？也欢迎任何有关如何使这一运行更好的其他见解。谢谢。

Answer 1

var throttled1 = _.throttle(singleLine, 50);

throttled1 必须在事件监听器外部进行初始化，以便它可以在内部逐个事件地跟踪调用和计时器。