即使被調用，函數也不會觸發
[英]Function not triggering even though it's called
問題描述
我正在寫一個網站，其中的一部分需要一些文本來顯示，就像正在鍵入一樣。 但是，我執行此操作的功能之一（ typewriter2 ）不起作用，即使它被調用了也是如此。
我嘗試遍歷代碼，並分別進行測試。 代碼運行正常，但是typewriter2函數不會啟動。
var x = document.getElementById("businesscard"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } var i = 0; var txt1 = "cd Info && cat Business Card"; var speed = 75; function typeWriter() { if (i < txt1.length) { document.getElementById("cmd1").innerHTML += txt1.charAt(i); i++; setTimeout(typeWriter, speed); } else { BusinessCard(); } } function BusinessCard() { var x = document.getElementById("businesscard"); if (x.style.display === "none") { x.style.display = "block"; typeWriter2(); } else { x.style.display = "none"; } } var txt = "cat Websites"; function typeWriter2() { if (i < txt.length) { document.getElementById("cmd2").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter2, speed); } }
/* unvisited link */ a:link { color: white; } /* visited link */ a:visited { color: white; } /* mouse over link */ a:hover { color: blue; } /* selected link */ a:active { color: blue; } body { background-color: #300A24; color: white; font-family: 'Ubuntu Mono', monospace; }
<body onload="typeWriter()"> <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap" rel="stylesheet"> <p id="cmd1">[dmeskin@code-u.org ~]$ </p> <div id="businesscard"><p>Daniel Notmylastname<br> Student at notmyschoool<br> Systems Administrator<br> <a href="http://code-u.org">http://code-u.org</a><br> <a href="mailto:1byte@gmail.com">1byte@gmail.com</a><br> <a href="tel:9175556761">+1(917)-555-6761</a><br><p id="cmd2">[dmeskin@code-u.org Info]$ </p>
什么是應該要發生的是， typeWriter2()啟動后businesscard被取消隱藏，但事實並非如此。
2 個解決方案
解決方案1
2 2019-08-25 00:48:45
使用全局變量會傷害您。 它使代碼不可預測，尤其是在多個函數中使用同一變量的情況下。
另一件事：不要在每次需要元素時都向DOM查詢元素：查詢DOM開銷很大，並且應盡可能避免（在您的代碼中沒關系，但是由於修復很容易，我會就像您從一開始就學習做正確的事。）在您的代碼中，它是75毫秒前的元素。
還有一件事：不要重復自己。 如果您在同一程序中一遍又一遍地編寫同一段代碼，或者僅使用另一個變量，則該將其移至函數了。 然后，在進行故障排除時也會有一個地方可以查看，如果需要，可以有一個地方可以應用修復程序。
以下示例絕不是完美的。 一個現代的變體可能會使用箭頭功能 ，但在本示例中我決定反對，因為如果您不習慣使用它們，可能很難閱讀它們。
這是一個稍作改進的版本，為打字機效果重用了相同的功能。
// A function that hides and show the Business card depending on the given variable. function setBusinessCardVisible (visibility) { const elem = document.getElementById("businesscard"); elem.style.display = visibility ? 'block' : 'none'; } // A generig typewriter that takes an object and callback as arguments. // The arg object has: // elem : the element that text shold be appended to // cmd : The text that should be added // delay : the delay between characters function typeWriter (arg, callback) { let index = 0; // set the index for this typewriter to 0. // Get the elment ONE time, and resuse that. arg.elem.textContent = arg.prompt; const length = arg.cmd.length; // Using setInteval to start ONE timer that will be called // until it is cleared with clearInterval let timer = setInterval( function () { // Add the character arg.elem.textContent += arg.cmd.charAt(index); // increment index and see if we are finished if (index++ >= length) { clearInterval(timer); // stop the timer if (callback) callback(); // call callback if specified } }, arg.delay ); } // call this function to start the effect function startTyping () { const elem1 = document.getElementById('cmd1'), elem2 = document.getElementById('cmd2'), delay = 75, // Set the delay here and reuse it below cmdprompt1 = "[dmeskin@code-u.org ~]$ ", // Part one: hide the card. cmdprompt2 = "[dmeskin@code-u.org Info]$ "; elem1.textContent = cmdprompt1; elem2.textContent = cmdprompt2; // Part one: hide the card. setBusinessCardVisible(false); // Start the first typewriter typeWriter({ elem: elem1, prompt: cmdprompt1, cmd: "cd Info && cat Business Card", delay: delay }, function () { // part two, show the card setBusinessCardVisible(true); // Start the secord typewriter setTimeout( function() { typeWriter({ elem: elem2, prompt: cmdprompt2, cmd: "cat Websites", delay: delay }, function () { setTimeout(function () { setBusinessCardVisible(false); elem1.textContent = cmdprompt1; elem2.textContent = cmdprompt2; setTimeout(startTyping, 2000); // Restart after 2 seconds }, 2000); }) }, 2000) // delay after showing card }); }
a, a:link, a:visited, a:hover, a:active { color: blue; } body { background-color: #300A24; color: white; font-family: monospace; }
<body onload="startTyping()"> <p id="cmd1">[dmeskin@code-u.org ~]$ </p> <div id="businesscard"> <p>Daniel Notmylastname<br> Student at notmyschoool<br> Systems Administrator<br> <a href="http://code-u.org">http://code-u.org</a><br> <a href="mailto:1byte@gmail.com">1byte@gmail.com</a><br> <a href="tel:9175556761">+1(917)-555-6761</a><br> <p id="cmd2">[dmeskin@code-u.org Info]$ </p> </div> </body>
解決方案2
0 2019-08-24 23:23:25
問題是i未設置為正確的值，因此必須重命名。
即使 e.preventDefault 在 React 中使用鈎子，為什么 onClick 事件會觸發兩次？
[英]Why is the onClick event triggering twice even though there's e.preventDefault using hooks in React?
即使我引用了JavaScript函數，事件監聽器也會多次調用JavaScript函數
[英]JavaScript function gets called multible times by event listener even though I reference the function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.