JS中循環的時間
[英]timing for loop in JS
問題描述
我用JS編寫了這段代碼：
function startFunction() {
p1 = document.getElementById('p1').innerHTML;
for (var i=1; i<=p1.length; i++) {
alert(p1.slice(0, i));
}
}
我用html中的onload事件調用該函數：
<body onload="startFunction()">
這是具有p1 id的段落：
<p id="p1">Hi, I'm</p>
我該如何延遲for循環。 我希望我的程序一個字母一個字母地寫p1文本。
5 個解決方案
解決方案1
1 2018-11-13 18:37:05
var alertEachLetter =function(p1, i){
setTimeout(function(){
alert(p1.slice(0, i));
},1000);
};
function startFunction() {
p1 = document.getElementById('p1').innerHTML;
for (var i=1; i<=p1.length; i++) {
alertEachLetter(p1, i);
}
}
為什么創建此alertEachLetter函數。 為此，您需要檢查此鏈接
解決方案2
1 已采納 2018-11-13 18:37:50
您不能也不應該在循環內延遲任何操作，因為這是創建無響應頁面的方式：瀏覽器在JavaScript代碼返回之前不會對用戶操作做出任何反應或執行任何可見的操作。
相反，您可以使用一些計時器，例如setInterval() ：
function startFunction() { var p1 = document.getElementById('p1'); var txt = p1.innerHTML; var i=0; var timer = setInterval(function() { p1.innerHTML = txt.slice(0,i++); if(i>txt.length) { clearInterval(timer); } },500); } startFunction();
<p id="p1">Hi, I'm</p>
解決方案3
1 2018-11-13 18:39:41
您不需要循環，您需要一個interval 。 Javascript的interval功能將在（大約）請求的間隔處調用您的函數。 因此，例如：
function startFunction() {
var p1 = document.getElementById('p1').innerHTML
var count = 1
var finished = p1.length
var iv = setInterval(function() {
alert(p1.slice(0,count++))
if (count > finished) {
clearInterval(iv) // stops the interval from firing once we finish our task
}
}, 1000) // 1000 ms, or every second.
}
解決方案4
1 2018-11-13 21:16:37
這是一個使用setTimeout而不是setInterval的快速示例。 除了不必清除超時以外，沒有什么區別-如果不滿足條件，您就不運行它。
// cache the elements const p1 = document.getElementById('p1'); const out = document.getElementById('out'); // make the text content from p1 iterable and split it into // the head (first element), and tail (everything else) const [head, ...tail] = [...p1.textContent]; const loop = function loop(head, tail) { // update the output text content with the result of head out.textContent = head; // if there's anything left of the tail array if (tail.length) { // remove the first element of tail and // add it to head head += tail.shift(); // call the function again with the new head and tail setTimeout(loop, 200, head, tail); } // pass in the head and tail to the function }(head, tail);
#p1 { display: none; }
<p id="p1">Content written letter by letter</p> <p id="out"></p>
解決方案5
0 2018-11-13 18:52:22
我認為以下方法可以幫助您實現自己的目標。 此方法使用setInterval （而不是循環）多次執行一個函數。 請參閱注釋以了解代碼邏輯：
//Grab our DOM elements var p1 = document.getElementById('p1').innerHTML; var copy = document.getElementById('copy'); //Execute a function every 250 milliseconds var intervalId = setInterval(onInterval, 250); //nextLetter is a function that will return the character at a particular index in the string. The function will increase the index each time it is called. The function will return null once it exceeds the innerHTML length. c is a "private" variable that can't be modified elsewhere in the program. var nextLetter = (function(i, limit) { var c = i; return function() { var idx = c++; if (idx > limit) { return null; } return p1.charAt(idx); }; })(0, p1.length); //The function we will execute at each interval function onInterval() { var letter = nextLetter(); if (letter) { copy.innerHTML += letter; } else { console.log('End of content reached - removing interval'); clearTimeout(intervalId); } }
<p id="p1">Make sure to read the in-code comments</p> <p id="copy"></p>
JavaScript時間/循環問題？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.