开发者问题收集

在初始页面加载时停止加载 js 函数

2019-05-24
1124
javascript html

我试图阻止每次加载页面时加载 JS 函数，我希望它仅在单击按钮时工作。我尝试使用 onclick 和 .addEventListener。使用 onclick 时，在单击加载数据按钮之前会显示输出数据，而使用 .addEventListener 时，即使单击按钮也不会加载任何数据。任何帮助都将不胜感激，谢谢！ 

<html>
<head>
    <title> Monitoring</title>
</head>
<body>
<div id="output"></div>
<script src="./lib/mam.web.min.js"></script>
<script>

    const TRYTE_ALPHABET = 'SFRRJJVGGYJI';

    const asciiToTrytes = (input) => {
      let trytes = '';
      for (let i = 0; i < input.length; i++) {
        var dec = input[i].charCodeAt(0);
        trytes += TRYTE_ALPHABET[dec % 27];
        trytes += TRYTE_ALPHABET[(dec - dec % 27) / 27];
      }
      return trytes;
    };

    const trytesToAscii = (trytes) => {
      let ascii = '';
      for (let i = 0; i < trytes.length; i += 2) {
        ascii += String.fromCharCode(TRYTE_ALPHABET.indexOf(trytes[i]) + TRYTE_ALPHABET.indexOf(trytes[i + 1]) * 27);
      }
      return ascii;
    };
    const outputHtml = document.querySelector("#output");
          const mode = 'public'
      const provider = ''

      const mamExplorerLink = ``

      // Initialise MAM State
      let mamState = Mam.init(provider)

      // Publish to tangle
      const publish = async packet => {
//      alert("coming into publish");
        // Create MAM Payload - STRING OF TRYTES
        const trytes = asciiToTrytes(JSON.stringify(packet))
        const message = Mam.create(mamState, trytes)
//      alert("p2");
        // Save new mamState
        mamState = message.state
//      alert("p3");
        // Attach the payload
        await Mam.attach(message.payload, message.address, 3, 9)
//        alert("p4");
        outputHtml.innerHTML += `Published: ${packet}<br/>`;
//      alert(message.root);
        return message.root
      }

      const publishAll = async () => {
//    alert("Yes 1.3");
        const root = await publish('ALICE')

        return root
      }

      // Callback used to pass data out of the fetch
      const logData = data => outputHtml.innerHTML += `Fetched and parsed ${JSON.parse(trytesToAscii(data))}<br/>`;
 (async function GKpublishAll(){
     const root = await publishAll();
    //  alert(root);
     outputHtml.innerHTML += `${root}`;

    })();

  </script>
  <form>
  Publish message :
  <input type="submit" onclick="GKpublishAll()">
</form>
</body>

</html>
3个回答

此段代码定义并立即调用 GKpublishAll 函数，如果您不想在页面加载时调用它，则应将代码从此： 

 (async function GKpublishAll(){
 const root = await publishAll();
//  alert(root);
 outputHtml.innerHTML += `${root}`;

})();

更改为此： 

 async function GKpublishAll(){
 const root = await publishAll();
//  alert(root);
 outputHtml.innerHTML += `${root}`;

}

然后，要在单击按钮时使用它，请将其附加到按钮的 onclick 处理程序，如下所示： 

<button onclick="GKpublishAll()">Click me</button>
Ermir
2019-05-24

您发布的代码中有一些不清楚/不确定/隐藏的部分。也许您应该从显示定义和调用的简化版本开始。

例如，有一个名为 logData 的函数您定义但从未调用/使用过。它应该在哪里使用，我在这里没有看到任何 fetch

@Ermir 的答案是“为什么这段代码即使没有单击按钮也能工作？”这个问题的正确答案。

Ahmed Ayoub
2019-05-26

在 <button> 标签上，您可能希望添加属性而不是添加 javascript 事件： mouseclick="function()" 。如果出现错误，请尝试 click="function()" 。或者尝试 onclick="function()" 。

希望有帮助！

naturecodevoid
2019-05-24