一次只调用一次函数

Question

我的网站上有这样的功能：

$("#search-label").on("keypress", function(e) {
  if(e.which == 13) {
    $('html, body').animate({
      scrollTop: $("#content").offset().top
    }, 2000);   
  }
});

它的任务是回车后滚动到选中的元素，效果很好，但问题是短时间内重复调用会卡住。

如何限制每 10 秒调用一次的可能性？

谢谢

Answer 1

您可以混合使用变量和setTimeout 来执行此操作：

var scrollOK = true;

$("#search-label").on("keypress", function(e) {
  if((e.which == 13) && scrollOK) {
    $('html, body').animate({
      scrollTop: $("#content").offset().top
    }, 2000);   
    scrollOK = false;
    setTimeout(function(){ scrollOK=true; }, 10000);
  }
});

它使用scrollOK 来确保滚动正常，当它滚动时，它会暂时将其设置为false（暂时因为setTimeout 在10 秒后将其设置回true，即10000毫秒）。

编辑：正如@ChloeAnderson 所说，这可能会占用更多资源。这是一个应该更好的版本：

var lastScrolled = 0;

$("#search-label").on("keypress", function(e) {
  if((e.which == 13) && (Date.now() >= (lastScrolled + 10000))) {
    $('html, body').animate({
      scrollTop: $("#content").offset().top
    }, 2000);   
    lastScrolled = Date.now();
  }
});