用户完成输入后运行JS代码

Question

我有很多的input领域用相同的class 。 当用户完成键入后， function doneTyping应该运行。

我试过了，但不知怎么做。 我可以对所有input字段使用一种功能吗？

$(function() {
  console.log('ready');
  var timer;
  var doneTypingInt = 5000;

  $('.typing').keyup(function(){
      clearTimeout(timer);
      if ($('.typing').val()) {
          timer = setTimeout(doneTyping, doneTypingInt);
      }
  });

  function doneTyping () {
    console.log('function doneTyping');
  }
});

Answer 1

您正在寻找的是去抖动

$('.typing').keypress(_.debounce(yourfunc, 3000))

Answer 2

您基本上想使用按键功能。 您调整后的代码：

$(function() {
  console.log('ready');
  var timer;
  var doneTypingInt = 5000;

  $('.typing').keypress(function(event){
    if(timer) {
        clearTimeout(timer);
        timer = null;
    }

    timer = setTimeout(doneTyping, doneTypingInt);
  });

  function doneTyping () {
    console.log('function doneTyping');
  }
});

Answer 3

我不认为您的代码有什么问题，您只需要等待5秒钟即可看到结果，并且为了对带有“ typing”类的所有输入使用一个函数，应将bind方法用作如下：

JavaScript代码： （ Jsfiddle ）

$(function() {
  console.log('ready');
  var timer;
  var doneTypingInt = 1000;

  $('.typing').keyup(function(){
      clearTimeout(timer);
      if ($('.typing').val()) {
          timer = setTimeout(doneTyping.bind($(this)), doneTypingInt);
      }
  });

  function doneTyping () {
    alert('function doneTyping ' + this.val());
  }
});