fiddle

Question

我已经看过很多不同的解决方案，但都没有。我知道它与setTimeout有关，但我不知道如何正确实现它。

function myfunction()
{
//the function
//wait for 1 second before it can be ran again
}

澄清一下：我不想定期调用该函数，我希望能够在再次调用该函数之前强制执行延迟。

Answer 1

var lastTime = 0;

function myFunction() {
    var now = new Date().getTime(); // Time in milliseconds
    if (now - lasttime < 1000) {
        return;
    } else {
        lastTime = now;
    }
    // rest of function
}

Answer 2

根本不需要使用setTimeout。以下与其他答案类似，但使用闭包来记住上次运行函数而不是全局变量。

var myFunction = function() {
  var lastTime = new Date();
  return function() {
    var now = new Date();
    if ((now - lastTime) < 1000) return;
    lastTime = now; 

    /* do stuff */

  };
}());

Answer 3

var lastRan = 0;

var myFunction = function() {
  var now = Date.now();
  if(now-lastRan < 1000) {
      return;
  }

  lastRan = now;

  //rest of function
};

Answer 4

我认为最简单的解决方案是保留boolean变量并在给定true后将其重置为delay。

fiddle

<强> HTML

<button id="clickme">click me!</button>

<强>的JavaScript

var canGo = true,
    delay = 1000; // one second
var myFunction = function () {
    if (canGo) {
        canGo = false;
        // do whatever you want
        alert("Hi!");
        setTimeout(function () {
            canGo = true;
        }, delay)
    } else {
        alert("Can't go!");
    }
}


$("#clickme").click(function(){
    myFunction();
})

使用此选项，您可以使用布尔值canGo，并将其设置为true。如果运行该函数，则会将canGo设置为false，并将setTimeout()设置为delay的时间段（以毫秒为单位）。如果您尝试再次运行该功能，它将无法运行，而是alert("Can't go!")。这只是为了示范目的;你不需要那个部分。在delay之后，canGo将设置为true，您将能够再次运行该功能。

Answer 5

如果您只想在设定的时间后再次运行您的功能，您可以使用setTimeout并将其传递给运行的函数和延迟时间（以毫秒为单位）。

function myfunction() {
    //the function

    //run again in one second
    setTimeout(myfunction, 1000);
}

根据海报的评论编辑：

var waiting = false;

var myfunction = function() {
    if (!waiting) {
        //Run some code

        waiting = setTimeout(function() {
            waiting = false;
        }, 1000);
    }
};

Answer 6

你可能想要使用来自underscore.js的节流或去抖动

http://underscorejs.org/#throttle

throttle_.throttle（功能，等待，[选项]）

创建并返回一个   当被调用时，传递函数的新的，受限制的版本   反复，实际上只会调用一次原始函数   每等待几毫秒。对于速率限制事件很有用   发生得比你能跟上的还要快。

默认情况下，只要您调用它，throttle就会执行该功能   这是第一次，如果你再次多次调用它   在等待期间，一旦这段时间结束。如果你喜欢   要禁用前沿呼叫，请传递{leading：false}，如果你这样做   喜欢在尾端禁用执行，传递{trailing：   假}。

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);

http://underscorejs.org/#debounce

debounce_.debounce（功能，等待，[立即]）

创建并返回一个   传递函数的新debounced版本将推迟它   执行直到自上次经过等待毫秒之后   它被调用的时间。用于实现仅应该执行的行为   在输入停止到达后发生。例如：渲染a   预览Markdown注释，在窗口后重新计算布局   已停止调整大小等等。

为立即参数传递true以使debounce触发   函数在前导而不是等待的后沿   间隔。在防止意外情况下很有用   双击＆＃34;提交＆＃34;按钮从第二次开火。

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

等待再次调用javascript函数之前

6 个答案:

fiddle