Javascript 读取当前文本输入值后的Ajax调用

为了从手持式条形码扫描仪中读取值，我遵循这个答案。代码工作正常，如答案所述（fiddle附在上面的链接中）

然而，我试图做的是在读取条形码后，根据文本输入的当前值进行一些ajax调用

我面临的问题是，如果我多次扫描条形码，在按下按钮（触发ajax调用）后，我会进行相同次数的ajax调用。例如，如果我读了4个条形码，我会进行4次相同的ajax调用（在我的例子中）。我要做的是按下按钮后只打一个电话，但只从文本输入框中读取最新的值

每次扫描条形码时，文本输入框都会显示新值（以前的值会被覆盖）。但是，ajax调用在按下

#scanner verify按钮

按钮时也会触发之前的所有扫描

这是我用自定义ajax调用修改的

/*
    This code will determine when a code has been either entered manually or
    entered using a scanner.
    It assumes that a code has finished being entered when one of the following
    events occurs:
        • The enter key (keycode 13) is input
        • The input has a minumum length of text and loses focus
        • Input stops after being entered very fast (assumed to be a scanner)
*/

var inputStart, inputStop, firstKey, lastKey, timing, userFinishedEntering;
var minChars = 3;

// handle a key value being entered by either keyboard or scanner
$("#scanInput").keypress(function(e) {
  // restart the timer
  if (timing) {
    clearTimeout(timing);
  }

  // handle the key event
  if (e.which == 13) {
    // Enter key was entered

    // don't submit the form
    e.preventDefault();

    // has the user finished entering manually?
    if ($("#scanInput").val().length >= minChars) {
      userFinishedEntering = true; // incase the user pressed the enter key
      inputComplete();
    }
  } else {
    // some other key value was entered

    // could be the last character
    inputStop = performance.now();
    lastKey = e.which;

    // don't assume it's finished just yet
    userFinishedEntering = false;

    // is this the first character?
    if (!inputStart) {
      firstKey = e.which;
      inputStart = inputStop;

      // watch for a loss of focus
      $("body").on("blur", "#scanInput", inputBlur);
    }

    // start the timer again
    timing = setTimeout(inputTimeoutHandler, 500);
  }
});

// Assume that a loss of focus means the value has finished being entered
function inputBlur() {
  clearTimeout(timing);
  if ($("#scanInput").val().length >= minChars) {
    userFinishedEntering = true;
    inputComplete();
  }
};


// reset the page
$("#reset").click(function(e) {
  e.preventDefault();
  resetValues();
});

function resetValues() {
  // clear the variables
  inputStart = null;
  inputStop = null;
  firstKey = null;
  lastKey = null;
  // clear the results
  inputComplete();
}

// Assume that it is from the scanner if it was entered really fast
function isScannerInput() {
  return (((inputStop - inputStart) / $("#scanInput").val().length) < 15);
}

// Determine if the user is just typing slowly
function isUserFinishedEntering() {
  return !isScannerInput() && userFinishedEntering;
}

function inputTimeoutHandler() {
  // stop listening for a timer event
  clearTimeout(timing);
  // if the value is being entered manually and hasn't finished being entered
  if (!isUserFinishedEntering() || $("#scanInput").val().length < 3) {
    // keep waiting for input
    return;
  } else {
    reportValues();
  }
}

// here we decide what to do now that we know a value has been completely entered
function inputComplete() {
  // stop listening for the input to lose focus
  $("body").off("blur", "#scanInput", inputBlur);
  // report the results
  reportValues();
}

function reportValues() {
  // update the metrics
  $("#startTime").text(inputStart == null ? "" : inputStart);
  $("#firstKey").text(firstKey == null ? "" : firstKey);
  $("#endTime").text(inputStop == null ? "" : inputStop);
  $("#lastKey").text(lastKey == null ? "" : lastKey);
  $("#totalTime").text(inputStart == null ? "" : (inputStop - inputStart) + " milliseconds");
  if (!inputStart) {
    // clear the results
    $("#resultsList").html("");
    $("#scanInput").focus().select();
  } else {
    // prepend another result item
    var inputMethod = isScannerInput() ? "Scanner" : "Keyboard";
    $("#resultsList").prepend("<div class='resultItem " + inputMethod + "'>" +
      "<span>Value: " + $("#scanInput").val() + "<br/>" +
      "<span>ms/char: " + ((inputStop - inputStart) / $("#scanInput").val().length) + "</span></br>" +
      "<span>InputMethod: <strong>" + inputMethod + "</strong></span></br>" +
      "</span></div></br>");
    $("#scanInput").focus().select();
    inputStart = null;

    // Some transformations

    const barcodeString = $("#scanInput").val();

    const productCode = barcodeString.substring(5, 19);
    const serialNumber = barcodeString.substring(36, 46);
    const batch = barcodeString.substring(29, 34);
    const expirationDate = barcodeString.substring(21, 27);

    // AJAX calls
    $('#scanner-verify-button').click(function() {
      $.ajax({
        url: "DecodeScanner",
        type: "POST",
        data: {
          productCode: productCode,
          serialNumber: serialNumber,
          batch: batch,
          expirationDate: expirationDate,
          commandStatusCode: 0
        },
        async: true,
        success: function(data) {
          $('#pTextAreaResult').text(data);
        }
      });
    });
  }
}

$("#scanInput").focus();

/*
此代码将确定何时手动或手动输入代码
使用扫描仪输入。
它假定在下列情况之一时，代码已输入完毕
发生的事件：
•输入输入键（键代码13）
•输入的文本长度最小，失去焦点
•输入速度非常快（假设为扫描仪）后停止输入
*/
var inputStart、inputStop、firstKey、lastKey、timing、userFinishedEntering；
var-minChars=3；
//处理键盘或扫描仪输入的键值
$（“#扫描输入”）。按键（功能（e）{
//重新启动计时器
如果（定时）{
清除超时（定时）；
}
//处理关键事件
如果（e.which==13）{
//输入了回车键
//不要提交表格
e、 预防默认值（）；
//用户是否已完成手动输入？
if（$（“#scanInput”）.val（）.length>=minChars）{
userFinishedEntering=true；//如果用户按了enter键
inputComplete（）；
}
}否则{
//输入了其他一些键值
//可能是最后一个角色
inputStop=performance.now（）；
lastKey=e.which；
//不要以为它刚刚完成
userFinishedEntering=false；
//这是第一个角色吗？
如果（！inputStart）{
firstKey=e.which；
输入开始=输入停止；
//注意注意力不集中
$（“正文”）。在（“模糊”、“扫描输入”、“输入模糊”）；
}
//再次启动计时器
计时=设置超时（inputTimeoutHandler，500）；
}
});
//假设失去焦点意味着该值已输入完毕
函数inputBlur（）{
清除超时（定时）；
if（$（“#scanInput”）.val（）.length>=minChars）{
userFinishedEntering=true；
inputComplete（）；
}
};
//重新设置页面
$（“#重置”）。单击（功能（e）{
e、 预防默认值（）；
重置值（）；
});
函数resetValues（）{
//清除变量
inputStart=null；
inputStop=null；
firstKey=null；
lastKey=null；
//清除结果
inputComplete（）；
}
//如果输入速度非常快，则假定它来自扫描仪
函数isScannerInput（）{
返回（（（inputStop-inputStart）/$（“#scanInput”）.val（）.length）<15）；
}
//确定用户是否只是在缓慢地键入
函数isUserFinishedEntering（）{
return！isScannerInput（）&&userFinishedEntering；
}
函数inputTimeoutHandler（）{
//停止侦听计时器事件
清除超时（定时）；
//如果该值是手动输入的，但尚未完成输入
如果（！isUserFinishedEntering（）| |$（“#scanInput”）.val（）.length<3）{
//继续等待输入
返回；
}否则{
reportValues（）；
}
}
//在这里，我们决定现在要做什么，因为我们知道已经完全输入了一个值
函数inputComplete（）{
//停止收听，以使输入失去焦点
$（“body”）.off（“模糊”，“扫描输入”，输入模糊）；
//报告结果
reportValues（）；
}
函数reportValues（）{
//更新指标
$（“#开始时间”）.text（inputStart==null？”：inputStart）；
$（“#firstKey”）.text（firstKey==null？”：firstKey）；
$（“#endTime”）.text（inputStop==null？”：inputStop）；
$（“#lastKey”）.text（lastKey==null？”：lastKey）；
$（“#totalTime”）.text（inputStart==null？”：（inputStop-inputStart）+“毫秒”）；
如果（！inputStart）{
//清除结果
$（“#结果列表”）.html（“”）；
$（“#扫描输入”）.focus（）.select（）；
}否则{
//预加另一个结果项
var inputMethod=isScannerInput（）？“扫描仪”：“键盘”；
$（“#结果列表”）.prepend（”+
“值：”+$（“#scanInput”）.val（）+“
”+
“ms/char:”+（（inputStop-inputStart）/$（“#scanInput”）.val（）.length）+“
”+
“InputMethod:“+InputMethod+”
”+
“
”；
$（“#扫描输入”）.focus（）.select（）；
inputStart=null；
//一些转变
常量条形码字符串=$（“#扫描输入”）.val（）；
const productCode=barcodeString.substring（5,19）；
const serialNumber=条形码字符串.子字符串（36,46）；
const batch=条形码字符串.子字符串（29,34）；
const expirationDate=barcodeString.substring（21,27）；
//AJAX调用
$（“#扫描仪验证按钮”）。单击（函数（）{
$.ajax({
url:“解码扫描程序”，
类型：“POST”，
数据：{
productCode:productCode，
serialNumber:serialNumber，
批次：批次，
到期日期：到期日期，
commandStatusCode:0
},
async:true，
成功：功能（数据）{
$（'pTextAreaResult'）。文本（数据）；
}
});
});
}
}
$（“#scanInput”）.focus（）；

HTML

重置


事件信息开始：

第一个键：

最后一天：

结束：


结果
验证

根据代码，扫描仪按钮的单击处理程序似乎已注册多次

单击处理程序应该

<form>
    <input id="scanInput" />
    <button id="reset">Reset</button>
</form>
<br/>
<div>
    <h2>Event Information</h2> Start: <span id="startTime"></span>
    <br/>First Key: <span id="firstKey"></span>
    <br/>Last Ley: <span id="lastKey"></span>
    <br/>End: <span id="endTime"></span>
    <br/>Elapsed: <span id="totalTime"></span>

</div>
<div>
    <h2>Results</h2>

    <div id="resultsList"></div>
</div>
<div class="col-sm-12">
    <button id="scanner-verify-button" type="submit">Verify</button>
</div>

// Check for any input changes

var productCode, serialNumber, batch, expirationDate;

$("#scanInput").on("change paste keyup", function () {
    barcodeString = $("#scanInput").val();
    productCode = barcodeString.substring(5, 19);
    serialNumber = barcodeString.substring(36, 46);
    batch = barcodeString.substring(29, 34);
    expirationDate = barcodeString.substring(21, 27);
}); 

// Ajax calls
$("#scanner-verify-button").click(function () {
    $.ajax({
        url: "DecodeScanner",
        type: "POST",
        data: {
            productCode: productCode,
            serialNumber: serialNumber,
            batch: batch,
            expirationDate: expirationDate,
            commandStatusCode: 0
        },
        async: true,
        success: function (data) {
            $('#pTextAreaResult').text(data);
        }
    });
});