在 Javascript 中使用 For 循环来计数一个二维码扫描器答案

【问题标题】：Using For Loop To Count A Qr Code Scanner In Javascript在 Javascript 中使用 For 循环来计数一个二维码扫描器
【发布时间】：2020-12-16 10:20:00
【问题描述】：

我在这里使用二维码扫描仪：https://github.com/mebjas/html5-qrcode

我成功启动了扫描仪，它会返回一个结果。

我想要达到的结果是扫描二维码11次，然后追加到一个列表中。

PS：使用 Framework7 自定义 DOM 调用 $$

我尝试循环它：

$$(document).on('click', '#skvqr', function () {
  Html5Qrcode.getCameras().then(devices => {
    /**
     * devices would be an array of objects of type:
     * { id: "id", label: "label" }
     */
    if (devices && devices.length) {
      var cameraId = devices[1].id;
      // .. use this to start scanning.

      const html5QrCode = new Html5Qrcode(/* element id */ "reader");
      html5QrCode.start(
        cameraId,
        {
          fps: 10,    // Optional frame per seconds for qr code scanning
          qrbox: 200  // Optional if you want bounded box UI
        },
        qrCodeMessage => {
          // do something when code is read
          alert("scan succesful " + qrCodeMessage)
          for (i = 11; i >= 1; --i) {
            alert("scan succesful " + qrCodeMessage + " Press Ok and Scan " + i + " more times")
  
             $$("#qr-scan-3").append('<input type="text" value=" ' + 'SKV : ' + qrCodeMessage + ' " placeholder="Qr Scan 1">' +
            '<span class="input-clear-button"></span>'
          );
          this.style.display = 'none'
          html5QrCode.stop().then(ignore => {
            // QR Code scanning is stopped.
          }).catch(err => {
            // Stop failed, handle it.
          });

          }

         
        },
        errorMessage => {
          // parse error, ignore it.
        })
        .catch(err => {
          // Start failed, handle it.
        });
    }
    // ------------------------------------------------------------------------
  }).catch(err => {
    // handle err
  });
});

它会提醒我 11 次警报

("scan succesful " + qrCodeMessage + " Press Ok and Scan " + i + " more times")

它只扫描第一次。

请帮帮我，还在学习 JavaScript

【问题讨论】：

标签： javascript html for-loop html-framework-7

【解决方案1】：

看起来您需要维护一个成功回调的全局状态。

// define the scanner object
const html5QrCode = new Html5Qrcode(/* element id */ "reader");

let matchesFound = 0;
const totalScansNeeded = 11;
var successCallback = qrCodeMessage => {
    matchesFound++;
    if (matchesFound < totalScansNeeded) {
        let remainingScans = totalScansNeeded - matchesFound;
        alert(`scan successful ${qrCodeMessage}. Press Ok `
            + `and Scan ${remainingScans} more times"`);
    } else {
        // .. expected matches found
        // .. do required UI changes
        html5QrCode.stop().then(ignore => {
          // QR Code scanning is stopped.
        }).catch(err => {
          // Stop failed, handle it.
        });
    }
}

然后在实际的监听器中消费它

$$(document).on('click', '#skvqr', function () {
  Html5Qrcode.getCameras().then(devices => {
    if (devices && devices.length) {
      var cameraId = devices[1].id;
      html5QrCode.start(
        cameraId,
        { fps: 10,  qrbox: 200 },
        successCallback)
        .catch(err => {
          // Start failed, handle it.
        });
    }
  });
});

【讨论】：