觸發事件每2分鐘打字

Question

當我正在尋找一種方式來觸發，當你輸入每2分鐘的情況下，在任何input或textarea。

如果您然後再停止輸入，則該事件將在兩分鐘的剩餘時間內再次發生。 （希望你能理解）

這是非常相同的功能的一個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分鐘，將執行7秒鐘，然後停止打字後。對於自動保存，這也是一個很好的解決方案，具體取決於您的偏好。

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 
} 

我還沒有測試過這段代碼。但你應該能夠從這裏拿走它。