javascript - 以设定的时间增量循环对象
问题描述
我一直在寻找这个问题的答案,但我发现的修复并没有帮助,所以我想我会直接指出我哪里出错了(像往常一样 - 非常感谢这里的任何帮助)
所以我有一组带有评论的对象,我需要它每 10 秒在网站上发布一条新评论,即更新文本等:
我想我会使用:
review = [{
name: 'X',
rating: 'X',
review: 'X'
},
{
name: 'X',
rating: 'X',
review: 'X'
}]
然后使用 setTimeout 函数和 for 循环更新站点的 html(显然这并不像我想象的那么容易) -
function init(){
var name = document.querySelector('.name');
for(i=0; i<reviews.length; i++){
setTimeout(function(){
name.innerHTML = reviews[i].aditional_info_name;
},10000)
}
}
这里的任何输入都会有帮助——我已经看过一些关于这个主题的其他帖子,但我还没有根据我迄今为止所看到的内容来实现一个固定的。
问题 -
我不断得到:
在此先感谢,
解决方案
let reviews = [{
name: 'X',
rating: 'X',
review: 'OX'
},
{
name: 'X',
rating: 'X',
review: 'XL'
},
{
name: 'X',
rating: 'X',
review: 'XD'
},
{
name: 'X',
rating: 'X',
review: 'XJ'
},
{
name: 'X',
rating: 'X',
review: 'HX'
},
{
name: 'X',
rating: 'X',
review: 'XG'
}
]
function init() {
var name = document.querySelector('.name');
for (var i = 0; i < reviews.length; i++) {
(function(index) {
setTimeout(function() {
name.innerHTML = reviews[index].review;
}, index * 1000)
})(i);
}
}
init();
<div class="name">
</div>
你应该使用let
或使用一个closure
。因为在你设置的超时被执行时,循环的最后一个变量是离开的。还要检查你提到的变量名而不是评论
function init(){
var name = document.querySelector('.name');
for(let i=0; i<reviews.length; i++){
setTimeout(function(){
name.innerHTML = reviews[i].aditional_info_name;
},i*10000)
}
}
或者
function init(){
var name = document.querySelector('.name');
for(var i=0; i<reviews.length; i++){
(function(index) {
setTimeout(function(){
name.innerHTML = reviews[index].aditional_info_name;
},index*10000)
})(i);
}
}
也看到这个
推荐阅读
- webpack - 将 webpack 2 迁移到 4
- eclipse - eclipse ide内容辅助java脚本
- node.js - 离子服务在“node_modules/@angular/core/src/render3/definition.d.ts”处有打字稿错误
- elasticsearch - 在 elasticsearch 上排序未按预期工作
- jquery - 在显示 html 内容时跳过 div 部分
- node.js - Azure 函数 TypeScript 装饰器
- java - JPQL 会话 bean 导致的 java.lang.ClassCastException
- android - 在 Android 应用程序上创建数据库
- python - pandas - 从所有可能的列组合中创建一个 df
- ruby-on-rails - 部署的 digitalocean 应用程序未读取环境变量