[英]timing for loop in JS
I wrote this code in JS: 我用JS编写了这段代码:
function startFunction() {
p1 = document.getElementById('p1').innerHTML;
for (var i=1; i<=p1.length; i++) {
alert(p1.slice(0, i));
}
}
I call the function with onload event in html: 我用html中的onload事件调用该函数:
<body onload="startFunction()">
And thi is the paragraph with p1 id: 这是具有p1 id的段落:
<p id="p1">Hi, I'm</p>
How can I make a delay for the for loop. 我该如何延迟for循环。 I want my program to write the p1 text letter by letter. 我希望我的程序一个字母一个字母地写p1文本。
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);
}
}
why create this alertEachLetter function. 为什么创建此alertEachLetter函数。 for that you need to check this link 为此,您需要检查此链接
setTimeout in for-loop does not print consecutive values for循环中的setTimeout不打印连续值
You can not and should not delay anything inside a loop, because that is how the nonresponsive pages are made: the browser does not react to user actions or do anything visible until the JavaScript code returns. 您不能也不应该在循环内延迟任何操作,因为这是创建无响应页面的方式:浏览器在JavaScript代码返回之前不会对用户操作做出任何反应或执行任何可见的操作。
Instead, you can use some timer, like setInterval()
: 相反,您可以使用一些计时器,例如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>
You don't need a loop, you need an interval
. 您不需要循环,您需要一个interval
。 Javascript's interval
feature will call your function at (approximately) the requested interval. Javascript的interval
功能将在(大约)请求的间隔处调用您的函数。 So, for example: 因此,例如:
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.
}
Here's a quick example using setTimeout
instead of setInterval
. 这是一个使用setTimeout
而不是setInterval
的快速示例。 There's not much difference except you don't have to clear the timeout - you simply don't run it if it doesn't meet a condition. 除了不必清除超时以外,没有什么区别-如果不满足条件,您就不运行它。
// 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>
Below is an approach I think may help you achieve what youre trying to do. 我认为以下方法可以帮助您实现自己的目标。 This approach uses setInterval
(instead of a loop) to execute a function multiple times. 此方法使用setInterval
(而不是循环)多次执行一个函数。 See the comments to understand the code logic: 请参阅注释以了解代码逻辑:
//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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.