使用 For 循环计算 Javascript 中的二维码扫描器

Question

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

并且我成功启动了扫描仪，它将 return 结果。

我想达到的效果是扫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
  });
});

它return 我 11 次警报

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

并且只扫描第一次

请帮助我，仍在学习JavaScript

Answer 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.
        });
    }
  });
});

使用 For 循环计算 Javascript 中的二维码扫描器

Using For Loop To Count A Qr Code Scanner In Javascript

html

javascript

for-loop

html-framework-7