Javascript Keyup注册Keyup的总数

问题

---

我正在注册一个keyup事件，当激活该事件时，它会显示一个建议主题的列表（使用JSON）

我的问题是，当注册密钥时，它似乎还记得以前的密钥。这意味着，它不是使用JSON发送一个请求，而是使用JSON发送多个请求（取决于注册了多少密钥）。这当然是非常低效的，我想解决的问题是每个键控只有一个请求。

我试过什么

---

我已经尝试过了该计划所采取的每一个行动。当我到达第二个keyup语句时就会出现问题（第一个是在我的模板中注册一个keyup，第二个是我正在使用的类中的一个keyup，它从指定的字段中检索值）。从这一点开始，每个关键点都会以某种方式“添加”到以前的关键点，例如：
按了3个以前的键->（示例）按了backspace->现在为backspace键注册了4个键，所有键都包含相同的信息

我试过设置语句等，检查之前的事件是否与当前事件相同，但这确实不起作用。这个类在不同的站点上工作，所以我认为问题出在其他地方，可能是模板（其中包含另一个注册键控的事件，但完全删除它不会改变任何东西），它是随着时间的推移由不同的程序员创建的（虽然我看不出有什么东西会造成这种奇怪的行为，但还是有点乱）。

相关代码

---

模板代码：

$('subject_input').addEvent('keyup', function(event){
    var project_id = $('projectId').options[$('projectId').selectedIndex].get('value');

    if(project_id != "" && project_id != 0){ //Als er een project geselecteerd is 
        var elInput = $('subject_input');

        var gc = new GooCompleter('subject_input', {
            action: '/houroverview/ajax_subjects/'+project_id+'/',  // JSON source 
            param: 'search',            // Param string to send 
            listbox_offset: {x: 0, y: 0},   // Listbox offset for Y 
            typebox_offset: {x: 1, y: 1},
            delay: 100,                     // Request delay to 0.1 seconds 
        });
//Irrelevant code

                });

类别代码键控：

 // Retrieve suggestions on keyup
    this.field.addEvent('keyup', function(event) {
        console.log(event); //this shows the amount of keyups etc.
        //more code
    }.bind(this));

我应该指出，我对JavaScript不是很在行，这意味着我要花很多时间才能弄清楚一些东西。我仍然看不到这段代码中有任何东西会产生如此奇怪的行为

问题:

---

是什么导致了这种奇怪的行为？我怎样才能摆脱它

---

干杯。

是的，根据您的代码，每个按键似乎都会发出一个新的请求。这不是奇怪的行为，只是您的代码会这样做。浏览器说每次按键发生时（键盘上的任何键都被释放），您的代码都会发送一个请求作为对每个按键的反应

当用户返回时，您可以忽略除最后一个之外的所有请求，但您也可以更有效地在用户停止键入（比如500毫秒）之前不发送任何请求

$('subject_input').addEvent('keyup', throttle( function(event) {
    //Once no keyup has happened for 500ms, this function is then called normally
}, 500 ));

节流阀的定义：

function throttle( fn, timeout ) {
    var timerid = 0;

    return function() {
        clearTimeout(timerid);

        var args = [].slice.call(arguments),
            ctx = this;

        timerid = setTimeout( function() {
            fn.apply( ctx, args );
        }, timeout );

    };
}

---

根据文档，

GooCompleter

会自动监视按键操作。只需初始化一次（例如在

domready

事件处理程序中）

---

在您当前的实现中，每个按键都会创建一个新的

GooCompleter

实例，因此在10个按键之后，有10个

GooCompleter

s，每个按键都会监控并发送AJAX请求（因此后续的按键会导致10个

GooCompleter

s发送10个AJAX请求）。

我知道这句话“奇怪的行为”会咬我的屁股：P谢谢，我会试试看。@Bono顺便说一句，代码中有一个bug（使用了

timerId

而不是

timerId

），请使用最新的编辑谢谢，我使用了一个不同的解决方案，然后你指定。但你的解决方案确实给了我这样做的想法。哈哈，是的，我自己刚刚发现它现在工作正常。