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

您正在寻找的是debounce

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

Answer 2

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

$(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秒钟才能看到结果，并且为了使用“打字”类对所有输入使用一个函数，您应该使用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());
  }
});

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

3 个答案: