如果函数在过去5秒内被调用过一次，我如何才能执行该函数？

Question

我有一个名为zoomed的函数，只要用户放大屏幕的一部分，它就会执行。因此，当用户缩放时，它可以在几秒钟内执行几次。我想记录上一次函数被调用时的“完成缩放”。实现这一目标的最佳方法是什么？

function zoomed() {
  console.log('called');
  // If this has only been called once in past
  // 5 seconds, user is done zooming
  // console.log('done zooming')
}

Answer 1

像这样的东西会起作用的：

var doneZooming = true; //Global variable to store the current "state" of zooming
var zoomTimeout = null; //Variable to store our 5-second timer

function zoomed() {
   resetZoomTimer();
   console.log("zooming");
}

function resetZoomTimer() {
   doneZooming = false;
   clearTimeout(zoomTimeout); //End current timer
   zoomTimeout = setTimeout(zoomComplete, 5000); //Reset the timer to 5 seconds
}

function zoomComplete() {
   doneZooming = true;
   console.log("zooming complete");
}

就是使用此代码的一个示例。密切关注控制台。

zoomComplete()函数充当一个回调，当用户完成缩放时将触发该回调。

如果这不是必需的，你可以在这里去掉一些函数--我把它去掉是为了提高可读性。同样，如果您希望巩固个人偏好，则可以简单地将resetZoomTimer()中的函数移动到zoomed()函数中。

Answer 2

你要找的东西通常被称为去抖动。在您这样的场景中经常使用它。

自己编写这个函数并不难，但是像lodash这样的实用程序库有很好的实现。

widget.on('zoom', _.debounce(zoomed, 5000, { trailing: true }));

这样做的目的是在缩放发生时开始侦听，然后在缩放过程中暂停5秒后，调用zoomed()函数。

请参阅https://lodash.com/docs/4.17.4#debounce

Answer 3

我个人有一个全局变量(可由函数的所有实例访问)，它在函数执行结束时被分配一个setTimeout函数。这将创建一个计时器，该计时器只有在没有被函数的另一个实例清除时才会执行。

例如：

var zoomTimer;

function zoomed() {
    console.log('called');
    // Clears the timeout associated with the variable
    clearTimeout(zoomTimer);
    // Sets the 5 second timeout
    zoomTimer = setTimeout(function() { console.log('done zooming'); }, 5000);
};