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

我正在寻找一种方法，当您在任何

输入

或

文本区域

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

如果随后停止键入，事件将在2分钟的剩余时间内再次发生。（希望你能理解）

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

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

到目前为止，我得到的是：

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

它没那么好用。如果键入多个字符，事件将在每个字符之后触发多次。即使单击Ctrl键、箭头键……，也会触发该事件。。。。。这不是故意的

当用户停止输入时，我似乎找不到一个好方法来检测

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

//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
}

---

有人能帮我吗？

您可以设置一个布尔值来检查新的用户输入，如

您发布的另一个代码的工作原理有点不同：它不是每2分钟运行一次，而是在您停止键入后运行5秒。对于autosave，这也是一个很好的解决方案，具体取决于您的喜好。

Edit

提供的示例代码运行良好：

---

您不应使用

setInterval

，而应使用

setTimout

，并仅在第一次运行后生成一个新的

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

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

---

演示

您需要一种称为基于时间的事件的东西

演示

//摘自雷米·夏普的网页
功能节流阀（fn、阈值保持、范围）{
阈值| |（阈值=250）；
最后，
延时定时器；
返回函数（）{
var context=scope | | this；
var now=+新日期，
args=参数；
如果（上次和现在<上次+阈值）{
//坚持住
clearTimeout（延迟计时器）；
延迟计时器=设置超时（函数（）{
最后=现在；
fn.应用（上下文，args）；
}，阈值）；
}否则{
最后=现在；
fn.应用（上下文，args）；
}
};
}
//实际代码
var间隔=2*60*1000；//2分钟
$（“输入，文本区域”）.keyup（油门（功能）{
控制台日志（新日期）；
}间期）；

首先，我们想知道用户是在打字还是被停止了。我们可以通过每隔几秒钟检查一次上一次击键的时间来做到这一点。如果是的话，就说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
}

---

我还没有测试过这段代码。但是你应该可以从这里开始。

问题是，如果你在每个字符后面键入许多字符，警报将显示多次，就在每个字符后面。如果为每个keyup事件添加一个

clearTimeout

，警报将被修复。用正确的提琴编辑了我的答案。干杯。这个效果很好：）。现在唯一的事情就是，如果文本被更改，只需执行事件。现在，如果您单击箭头键或任何其他键，事件将被触发。@yaxxe您可以使用

input

event而不是

keyup

，但这仅适用于现代浏览器<代码>$（'input，textarea'）.bind（'input'，function（）{…}）有关详细信息，请参阅

//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");
}

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

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

// 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));

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
}