动态添加javascript输入计时器

时间:2014-08-26 05:04:58

标签: javascript jquery timer

所以我有一个输入框:

HTML

<input id="equation1" name="equation1" type="text"/>

我有一个计时器,当用户停止在输入框中输入时执行一个功能:

的JavaScript

var typingTimer;
var doneTypingInterval = 300;

$('#equation1').keyup(function() {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(submitEquation, doneTypingInterval);
});

$('#equation1').keydown(function(){
    clearTimeout(typingTimer);
});

我有一个javascript函数来创建更多输入字段

的JavaScript

function addEquation() {
    counter += 1;

    var newEquation = document.getElementById("equation1").cloneNode(true);
    newEquation.id = ("equation" + counter);

    newdiv = document.createElement('div');
    newdiv.id = ("new" + counter);
    thing = "new" + counter;

    document.getElementById("new").appendChild(newdiv);
    newEquation.setAttribute('name', 'equation' + counter);
    document.getElementById(thing).appendChild(document.createTextNode("Equation" + counter + ": "));
    document.getElementById(thing).appendChild(newEquation);
}

这一切都很好。问题是如何为创建的新输入框创建新的输入计时器?

1 个答案:

答案 0 :(得分:2)

您可以将您的keydown逻辑抽象为一个函数,例如:

function bind_equation_key(id) {
    // where id is "equation1", "equation2", etc
    $('#'+id).keyup(function() {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(submitEquation, doneTypingInterval);
    });

    $('#'+id).keydown(function(){
        clearTimeout(typingTimer);
    });
}

然后在每个新输入上使用其ID "new" + counter调用它,尽管您可能希望它为"equation" + counter以保持一致性。

只需确保在创建新输入时清理上一个输入的计时器。