javascript - 读取当前文本输入值后进行 Ajax 调用

Question

我正在关注这个答案https://stackoverflow.com/a/20698523/1695685为了从手持式条形码扫描仪读取值。正如答案中提到的，代码工作正常( fiddle 附在上面的链接中)

但是，我想做的是根据读取条形码后文本输入的当前值进行一些ajax调用。

我面临的问题是，如果我多次扫描条形码，则在按下按钮(触发ajax调用)后，我会进行相同次数的ajax调用。例如如果我读取 4 个条形码，我将进行相同的 ajax 调用(在我的例子中为 http://localhost:51990/Home/DecodeScanner )4 次。我想要的是按下按钮后只进行一次调用，但只从文本输入框中读取最新的值。

每次我扫描条形码时，文本输入框都会显示新值(以前的值将被覆盖)。但是，按下 #scanner-verify-button 按钮时，ajax 调用也会触发之前的所有扫描。

这是我修改过的Fiddle使用我的自定义 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();

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>

Answer 1

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

点击处理程序只能注册一次。

reportValues() 被多次调用，从而多次注册点击处理程序。这意味着当您按下按钮时，所有点击处理程序都会被调用并触发 ajax 请求。

您需要将点击处理程序放在任何可以多次调用的函数之外。

此外，根据代码，点击处理程序需要访问的所有变量都应在 reportValues 外部声明。