问题

Question

问题

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

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

我尝试了什么

<小时/> 我试图逐步完成程序采取的每一个动作。当我到达第二个keyup语句时出现问题（第一个是在我的模板中注册一个keyup，第二个是我正在使用的类中的一个keyup，它从指定的字段中检索值）。从这一点开始，每个键盘都会以某种方式“添加”到之前的键，从而导致例如：
按下了3个以前的键 - ＆gt; （示例）退格按下 - ＆gt;现在为退格键注册了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并不是那么好，这意味着我花了很多时间来解决一些问题。我仍然无法在此代码中看到任何应该产生这种奇怪行为的内容。

问题

<小时/> 造成这种奇怪行为的原因是什么？我怎样才能摆脱它？

干杯。

Answer 1

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

当他们回来时你可以忽略除了最后一个，但你也可以更有效，并且在用户停止输入之前不会发送任何请求，比如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 );

    };
}

Answer 2

根据文件，GooCompleter自己注意按键。您只需要初始化一次（例如，在domready事件处理程序中）。

使用您当前的实现，每个keyup都会创建一个GooCompleter的新实例，所以在例如10个关键字有10 GooCompleter个，每个都监控按键并发送AJAX请求（这样后续的密钥会导致10个GooCompleter发送10个AJAX请求。

Keyup记录了键盘总数

问题

我尝试了什么

相关代码

问题

2 个答案: