Question

我正在尝试创建一个每分钟运行一次的小型函数，但是如果用户在执行该函数时仍在键入命令，请延迟执行直到用户停止键入为止。

我已经阅读了this和其他相关问题，但是我的问题有所不同，因为它包括已经通过setTimeout（）执行的预定函数执行

如果用户仍在键入，我曾尝试重置计时器，但这只会强制该函数再次运行多次。

var timer = null

runTimer()

$('body').on('keyup', ':input', function(e) {
    timer = setTimeout(runTimer, 400);
});

$('body').on('keydown', ':input', function(e) {
    clearTimeout(timer);
});

function runTimer() {
    setTimeout(function(){
        executeFunction();
    }, 60 * 1000);
}

function executeFunction() {
    console.log('Ran function')
    setTimeout(function(){
        executeFunction();
    }, 60 * 1000);
}

我希望该功能每分钟执行一次，延迟到用户停止键入后将计时器重置为执行后一分钟。也可以使用underscore.js。

Answer 1

您可以使用isTyping变量来检查是否按下了任何键，并用setInterval等待isTyping变成false。如果isTyping为假，请运行函数。

类似这样的东西：

您可以通过在输入字段中输入进行测试。长按一个键时，执行将停止并在释放键后立即恢复。

var isTyping = false;
var interval = null;

var count = 0; // demo only

$('body').on('keyup', ':input', function(e) {
    isTyping = false;
});

$('body').on('keydown', ':input', function(e) {
    isTyping = true;
});


runTimer();


function executeFunction(){
  console.log('Execute', count++);
  runTimer();
}

function runTimer(){
  // I change to 1 second for easy testing
  setTimeout(runExecute, 1 * 1000);
}

function runExecute(){
  /**
   * If not typing
   *   clear interval
   *   execute function
   * else, if interval is not set
   *   set interval
   * else
   *   do nothing, wait for user stop typing
   */
  if (isTyping !== true){
    clearInterval(interval);
    interval = null;
    executeFunction();
  } else if (!interval){
    interval = setInterval(runExecute, 4);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input>

注意

仅使用keyup和keydown并不是检查用户是否在打字的好方法。请参见this question，以获取更好的实现来检查用户输入。

延迟执行setTimeout（）函数，直到用户停止键入

1 个答案: