Question

我正在寻找一种方法，可以在您输入任何input或textarea时每2分钟触发一次事件。

如果您再停止输入，则会在2分钟的剩余时间内再次发生该事件。 （希望你理解）

当草稿每分钟自动保存一次时，它与 WordPress 使用的功能非常相同。

我不是Wordpress专家，所以我找不到他们在脚本中使用的功能。

这是我到目前为止所得到的：

    $("input, textarea").keyup(function () {
    var minutes = 2;
    var time = minutes * 60000;
    setInterval(function () {
        // Do event here
    }, time);
});

效果不好。如果您输入的是多个字符，则会在彼此之后多次触发事件。即使您单击Ctrl，箭头键.....这也是触发事件。

Fiddle Demo

当用户停止输入时，我似乎无法找到一种好的检测方法。

我找到了这段代码，但我不知道如何使用它，以及我正在使用的其他代码：

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').keyup(function(){
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').keydown(function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

有人可以帮帮我吗？

Answer 1

你不应该使用setInterval而是使用setTimout，并且只有在第一次运行后才会生成一个新的..

var saveTimer = null,
    minutes = 2,
    time = minutes*60000;

$("input, textarea").keyup(function () {
    if (!saveTimer){
        saveTimer = setTimeout(function() {
            alert("Hello");
            saveTimer = null;
        }, time);
    }
});

演示 http://jsfiddle.net/gaby/h9pe3/

Answer 2

您可以设置布尔值以检查新用户输入，例如I did in this fiddle

var hasTyped = false;

$("input, textarea").keyup(function () {
    hasTyped = true;


});
var minutes = 0.1;
var time = minutes*60000;
setInterval(function() {
    if(hasTyped){     
        alert("Hello");
        hasTyped = false;
    }
}, time);

您发布的其他代码有点不同：它不是每2分钟运行一次，而是在您停止输入后运行5秒。对于自动保存，这也是一个很好的解决方案，具体取决于您的偏好。

Answer 3

修改 http://jsfiddle.net/Varinder/RWBYH/2/

//setup before functions
var typingTimer = null;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example

//on keyup, start the countdown
$('input').keyup(function(){
    clearTimeout(typingTimer); // clearing timer
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('input').keydown(function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping() {
    alert("Saving draft");
}

提供的示例代码工作正常：http://jsfiddle.net/Varinder/RWBYH/1/

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('input, textarea').keyup(function(){
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('input, textarea').keydown(function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    alert("Saving draft");
}

Answer 4

您需要一些名为基于时间的事件throttling。

http://jsfiddle.net/Gobie/LUv2u/上的演示

// taken from Remy Sharp's page
function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

// actual code
var interval = 2 * 60 * 1000; // 2min
$("input, textarea").keyup(throttle(function () {
   console.log(new Date);
}, interval));

Answer 5

首先，我们希望能够判断用户是打字还是停止。我们可以通过检查最后一次击键时的每几秒钟来做到这一点。如果是的话，那就说30秒。从最后一个开始我们可以假设他没有打字。第二个间隔将每两分钟自动保存一次，如果用户不再输入，它将自行清除。

var isTyping = false;
var lastKeystroke = null;
var autosaveInterval = null;
$('#myInput').keyup(function() {
   lastKeystroke = Date.now();
   if (autosaveInterval == null) {
     startAutosaveInterval();
   }
});

setInterval(function() {
  if (Date.now() - lastKeystroke > 30000) { // 30 sec. since last key stroke
    isTyping = false;
  } else {
    isTyping = true;
  }
}, 2000);

function startAutosaveInterval() {
  autosaveInterval = setInterval(function() {
    // do whatever
    if (!isTyping) {
      clearInterval(autosaveInterval);
      autosaveInterval = null;
    }
  }, 2 * 60 * 1000); // every two minutes
}

我还没有测试过这段代码。但你应该可以从这里拿走它。

键入时每2分钟触发一次事件

5 个答案: