使用 nodejs/electron 添加新行导致添加多行答案

【问题标题】：Using nodejs/electron to add new line causing multiple lines to be added使用 nodejs/electron 添加新行导致添加多行
【发布时间】：2020-01-22 06:45:51
【问题描述】：

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

    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');

      }

但这里发生的是：

第一次检查时，会出现一个新行，并带有“这是结束行”
然后我会取消选中，没有按预期发生
我会重新检查，会出现三个新行“这是结束行”（总共 4 行“这是结束行”）
然后我会取消选中，没有按预期发生
我会重新检查，会出现 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>

【问题讨论】：

移除点击监听器。

标签： javascript node.js electron

【解决方案1】：

您当前的代码显示“每次点击togBtn，向checkbox 添加一个侦听器，该侦听器将在changes 时执行。”

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

要解决此问题，您需要以一种从不添加多个侦听器的方式来构建代码，除非您真的非常需要（不太可能）。这肯定会涉及将change 侦听器移到click 侦听器之外。

【讨论】：