javascript - 使用nodejs/electron添加新行导致添加多行

Question

我的代码有一个奇怪的行为。所以我有一个复选框，当选中文件时，它会添加一个包含新文本的新行

    checkbox.addEventListener('change', function () {
      if (checkbox.checked) {

        console.log('Checked');

        var logStream = fs.createWriteStream('C:/Users/solars/Desktop/myFile.txt', { flags: 'a' });
        // use {flags: 'a'} to append and {flags: 'w'} to erase and write a new file
        logStream.end('\nthis is the end line');

      } 

但是这里发生的是:

1. 第一次检查时，会出现一个新行，并显示“这是结束行”
2. 然后我会取消选中，但没有发生预期的情况
3. 我会重新检查，会出现三行新的“这是结束行”(总共 4 行“这是结束行”)
4. 然后我会取消选中，但没有发生预期的情况
5. 我会重新检查，会出现 5 行新的“这是结束行”(总共 9 行“这是结束行”)

我相信它在某个地方循环，当它取消选中时，它会在要添加的行数上加一(如果有意义的话)

有什么想法可以解决这个问题吗？

整个代码:

  <div class="main">
    <h1> click me </h1>
    <label class="switch"><input type="checkbox" id="togBtn">
      <div class="slider round"></div>
    </label>

    <script>
      src = "./renderer.js";
      const replace = require('replace-in-file');
      //const { dialog } = require('electron').remote;
      var fs = require('fs');
      var array = fs.readFileSync('C:/Users/solars/Desktop/myFile.txt').toString().split("\n");
      var checkbox = document.querySelector('input[type="checkbox"]');
      var arrayCheck = array.includes("triangle=3")
      //checkbox.checked = (arrayCheck) ? true : checkbox.checked
      document.getElementById("togBtn").addEventListener("click", () => {


        checkbox.addEventListener('change', function () {
          if (checkbox.checked) {

            console.log('Checked');

            var logStream = fs.createWriteStream('C:/Users/solars/Desktop/myFile.txt', { flags: 'a' });
            // use {flags: 'a'} to append and {flags: 'w'} to erase and write a new file
            logStream.end('\nthis is the end line');

          } else {

            console.log('Not checked');
            //code that set tiangle to  equal 3

          }
        });


      });
    </script>
  </div>

Answer 1

您当前的代码表示“每次单击 togBtn 时，向 checkbox 添加一个监听器，该监听器将在更改时执行。”

单击按钮五次 - 您将五个 change 监听器添加到 checkbox。当复选框更改状态时，每个监听器都会运行，并且单击 togBtn 的次数越多，监听器函数将来运行的次数就越多。

要解决此问题，您需要以一种永远无法添加多个监听器的方式构建代码，除非您真的非常需要(不太可能)。这肯定会涉及将 change 监听器移到 click 监听器之外。