我想一次又一次地使用数组中的项替换段落的内容.当我使用console.log()来检查结果时,输出正常.但它没有像预期的那样替换段落上的内容,只是在迭代完成时显示最后一个单词.
这是我创建和迭代数组的代码：
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = new Array();
_array = _strng.split(' ');
jQuery.each(_array,function(index,item)
{
console.log(item); // Works fine
$('p').html(item); // Only shows the last word when the iteration is over
wait(1000); // Custom function
console.clear();
});
});
wait()函数：
function wait(_timeframe)
{
var final = 0;
var timeframe = new Date(_timeframe);
var initial = Date.Now();
final = initial + _timeframe;
while (Date.Now() < final) { };
}
HTML代码：
<p>Text to be replaced here</p>
解决方法
使用
setInterval()方法检查下一个示例,它将替换< p>的文本.每3秒运行一次元素,当它到达结束时循环回到数组的开头.
另外,我添加了一个按钮,向您展示如何使用clearInterval()方法停止执行此过程(以防您需要).
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = _strng.split(' ');
var _idx = 0;
var ival = setInterval(function()
{
var item = _array[_idx++];
console.log(item);
$('p').html(item);
// Check the restart (loop back) condition.
if (_idx >= _array.length)
_idx = 0;
},3000);
// Register listener on the click event of stop button.
$("#btnStop").click(function()
{
clearInterval(ival);
});
});
.as-console-wrapper {
max-height: 50% !important;
}
p {
background: skyblue;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>INITIAL TEXT...</p> <br> <button id="btnStop" type="button">Stop</button>