将参数传递给此函数不起作用？答案

【问题标题】：Passing parameters into this function not working?将参数传递给此函数不起作用？
【发布时间】：2019-11-20 06:10:53
【问题描述】：

我正在尝试构建一些可重用的代码 sn-ps 来创建打字机效果。它隐藏一个段落，然后用一些 js 代码将其替换为另一个段落，该代码一次打印一个字符。我正在尝试制作可以重复使用的段落 id 和文本参数，但我无法让这些参数通过我的函数。到目前为止，一些非常有帮助的人帮助了我，但我无法弄清楚这最后一步。

我将附加我的函数，然后不通过参数。任何帮助将不胜感激。

    <body>

    <div class="style typeClick">
      <p id="remove">Hide Me</p>
      <p id="type"></p>
  </div>
</body>

<style>
  .style {
    height: 2em;
    width: 100%;
    background-color: white;

  }
  body{
    background-color: lightgrey;
  }

  .hide {
    display: none;
  }
</style>

<script>
    /* ---------- DOESNT WORK AS EXPECTED  ---------- */
  (() => {

    function hideInitText() {
      let hide = document.getElementById("remove");
      hide.classList.add("hide");
    }
    hideInitText();
  //make a parameter that will take each id through it

    const typeWriter = ((id, text) => {
      let letCounter = 0;
      return () => {
        let cycle, classCounter;
        let typewriter = text;
        let speed = 50;

        //Cycle through each id after done
        cycle = document.querySelectorAll(id);

        for (classCounter = 0; classCounter < cycle.length; classCounter++) {
          typeOut();
        }


        function typeOut() {
          if (letCounter < typewriter.length) {
            cycle[classCounter].innerHTML += typewriter.charAt(letCounter);
            letCounter++;
            setTimeout(typeWriter, speed);
          }
        }
      };
    })();
    document.querySelector('.typeClick').addEventListener('click', function() {typeWriter("#type", "type out text")});
  })();






      /* ---------- WORKS AS EXPECTED ---------- */


      (() => {

        function hideInitText() {
          let hide = document.getElementById("remove");
          hide.classList.add("hide");
        }
        hideInitText();
      //make a parameter that will take each id through it

        const typeWriter = (() => {
          let letCounter = 0;
          return () => {
            let cycle, classCounter;
            let typewriter = "Type out text";
            let speed = 50;

            //Cycle through each id after done
            cycle = document.querySelectorAll("#type");

            for (classCounter = 0; classCounter < cycle.length; classCounter++) {
              typeOut();
            }

            function typeOut() {
              if (letCounter < typewriter.length) {
                cycle[classCounter].innerHTML += typewriter.charAt(letCounter);
                letCounter++;
                setTimeout(typeWriter, speed);
              }
            }
          };
        })();
        document.querySelector('.typeClick').addEventListener('click', typeWriter());
      })();


</script>

【问题讨论】：

标签： javascript parameter-passing

【解决方案1】：

当使用((id, text) => {})() 时，函数以零参数调用。如果你想给这个函数提供参数，请不要使用IIFE，或者使用(id, text) => { ((id, text) => {})(id, text) }。

https://codepen.io/1010543618/pen/MWWLxmN?editors=0110

  const typeWriter = (selector, text) => {
    let letCounter = 0;
    let cycle, classCounter;
    let typewriter = text;
    let speed = 50;

    //Cycle through each id after done
    cycle = document.querySelectorAll(selector);

    function typeOut() {
      if (letCounter < typewriter.length) {
        for (classCounter = 0; classCounter < cycle.length; classCounter++) {
          cycle[classCounter].innerHTML += typewriter.charAt(letCounter);
          letCounter++;
        }
        setTimeout(typeOut, speed);
      }
    }

    typeOut();
  };

【讨论】：

你是上帝派来的。不使用 IIFE 的原因是什么？没有参数还合适吗？
根据我的理解，使用IIFE意味着你创建一个函数并立即调用它。在你的情况下，你做var tempfunc = (id, text) => { xxxxx }; var typeWriter = tempfunc()。当您调用typeWriter 时，您的参数会给出tempfunc 返回的函数。
当你调用 typeWriter 时 tempfunc 返回的函数是你真正调用的。