仅在内容未在500毫秒内更改时才执行操作

Question

目前我有

$('document').ready(function(){
  $('input').keyUp(function(){
    $('#output').text($(this).text());
  });
});

我想做的是,

当按键被注册等待500ms时,如果在该500ms内再次按下一个键,则等待该按键500ms.

一旦500ms过去了,就跑了 $('#output').text($(this).text());

我将如何管理超时？

Answer 1

您可以设置和清除计时器,如下所示:

$(function(){
  $('input').keyup(function(){
    clearTimeout($.data(this, 'timer'));
    var input = this;
    $.data(this, 'timer', setTimeout(function() {
      $('#output').text($(input).text());
    }, 500));
  });
});

这样做就是keyup它在运行之前设置了500ms的延迟$('#output').text($(input).text()),如果在此之前按下另一个键,它会取消定时器并启动另一个...所以它将在500ms空闲时运行.此外,通过使用$.data()将计时器存储在特定元素上,此通用解决方案适用于页面上的任意数量的元素.

顺便说一句,你$('document').ready()应该$(document).ready()或者$(function() {像我上面那样更短,"document"(在引号中)不必要地运行一个选择器.