Ajax调用多次调用超时函数

时间:2014-05-02 08:19:22

标签: javascript jquery ajax barcode-scanner

我正在使用这个伟大的javascript(http://www.deadosaurus.com/detect-a-usb-barcode-scanner-with-javascript/)来识别USB条形码扫描仪输入(只是非常快速的键入的键盘笔划),而无需关注网站中的任何输入字段。事情很好,但是我需要做的是在我可以对扫描结果做任何事情之前弄清楚扫描的项目是A类型还是B类,这就是Ajax调用发挥作用的地方像这样:

$(document).ready(function() {
var pressed = false; 
var chars = []; 
$(window).keypress(function(e) {
    if (e.which >= 48 && e.which <= 57) {
        chars.push(String.fromCharCode(e.which));
    }
    console.log(e.which + ":" + chars.join("|"));
    if (pressed == false) {
        setTimeout(function(){
            if (chars.length >= 10) {
                var barcode = chars.join("");
                console.log("Barcode Scanned: " + barcode);
                // Here is the ajax-call.
                checkItemType(barCode).success(function(response) {
                // Do stuff with the response.
                });
            }
            chars = [];
            pressed = false;
        },500);
    }
    pressed = true;
});
});

功能:

function checkItemType(barCode) {
    // Example parsing for the id I want to do work with.
    var itemId = parseInt(barCode.substr(9, 6).replace(/^[ 0]/g, ''));
    var data =  { itemId: itemId };
    return $.ajax({
        type: 'POST',
        url: 'Controller/CheckItemType',
        traditional: true,
        dataType: 'json',
        data: data
    });
}

我第一次扫描物品时,一切正常。第二次进行扫描时,checkItemType函数调用2x,第三次调用4x,通常以8x调用。

我无法理解这个问题。在chars.length&gt; = 10时有一个if子句,并且在条形码扫描器输入停止后,字符列表应该清除。正如我之前所说的,删除ajax-call修复了问题,但是我无法真正想出一种在超时函数之外进行调用的方法。我猜我应该补充一点,我还在学习javascript,而且我真的没有想过这个。提前谢谢。

编辑:成功代码并不重要,所以按照建议将其删除。

4 个答案:

答案 0 :(得分:0)

我已经查看了代码并认为我已修复它。我在您创建条形码后添加了chars = []; pressed = false;,然后在扫描条形码后重置。看看下面:

JSFiddle

    if (pressed === false) {
        setTimeout(function () {
            console.log("Timeout");
            if (chars.length >= 10) {
                var barcode = chars.join("");
                chars = [];
                pressed = false;
                console.log("Barcode Scanned: " + barcode);
                // Here is the ajax-call.
                checkItemType(barCode).success(function (response) {
                    // Do stuff with the response.
                });
            }
            chars = [];
            pressed = false;
        }, 500);
    }
    pressed = true;

答案 1 :(得分:0)

我想说这是一个时间/同步问题。您为每个事件/键击设置500毫秒的超时:这意味着在第一次击键后500毫秒后,您开始运行您的(第一个)功能:chars.length&gt; 10然后当你进行Ajax调用时(因为它很慢),第二个超时会触发:chars.length仍然是&gt; 10所以你再去运行checkItemType ......依此类推,直到第一次调用将设置chars = []。

checkItemType si执行的次数与击键次数和运行checkItemType的时间之间的延迟有关。如果您在检查&gt; = 10后仅重置chars = [],则仍然无法确定第二个超时是否已经超过该条件。

确保只运行一次checkItemType的一种方法是在第一次击键时只设置一个超时,然后如果chars.lenngth&lt; 10当它发射时再将它设置为另一个x ms ......等等。

答案 2 :(得分:0)

您描述的错误听起来像代码中的其他位置会再次绑定处理程序。

你是否以某种方式重新加载页面的某些部分(可能通过ajax),这可能会再次触发$(window).keypress( ... )绑定?

答案 3 :(得分:0)

if(press == false) - &gt; if(!按)或if(按=== false)