setinterval javascript的ajax问题

Question

作为个人项目的一部分，我使用 Youtube API。你可以在这里查看我的网站：www.lamusiquedelamour.com

当用户到达时，它会加载 10 个视频。当用户在视频结束前 30 秒到达最后一个时，它会检查是否有即将播放的视频。是不是没有，它调用了一个名为loadmore() 的函数，它启动一个ajax 请求来检索接下来的10 个视频。

在 Youtube API 中没有实现视频的“当前时间”监听器，所以我要做的是在第一个播放器准备好时启动一个带有 setInterval 的 YoutubePlayerInfo() 函数。 （当 YT 播放器准备就绪时，它会自动调用 onYoutubePlayerReady 函数。

onYouTubePlayerReady: function(id) {
    if(!this.intervalYoutube) {
        inst = this;
        this.intervalYoutube = setInterval(inst.updatePlayerInfo, 250);
    }
}

这是我的updatePlayerInfo 函数的有趣部分，它每 250 毫秒调用一次。

if( (inst.currentTrack().getElement().getDuration() - inst.currentTrack().getElement().getCurrentTime()) < 30) {
    if(!inst.isNext() && (inst.state != 3)) { 
        inst.state = 3;
        inst.loadmore();
    }
}

isNext 函数只检查我的视频数组中是否有视频。因此，当没有即将播放的视频并且我的状态不是 3 时，我将状态设置为 3 并启动我的 ajax。这就是问题所在。

由于 Ajax 部分很慢并且有 250 毫秒的 setInterval，因此“loadmore”会被触发 1 到 3 次。

我认为它在真正将状态设置为 3 之前等待退出 if。因此，如果 ajax 速度很快，它会调用 loadmore 一次，但这不是 100% 确定的。

3 次 loadmore 调用是“并行”的，它在第一次结束之前进入第二次和第三次。

这是我认为它正在做的事情：http://i.stack.imgur.com/3l4nP.jpg

你知道如何只给我的loadmore() 打一次电话吗？

Answer 1

尝试使用setTimeout 而不是setInterval... 这样，计时器在前一个周期完成之前不会启动。您只需拨打setTimeout 一次即可开始循环，并在循环完成后再次重复这些操作。

onYouTubePlayerReady: function(id) {
        if(!this.intervalYoutube) {
            inst = this;
            this.intervalYoutube = setTimeout(inst.updatePlayerInfo, 250);
        }
}

---

if( (inst.currentTrack().getElement().getDuration() - inst.currentTrack().getElement().getCurrentTime()) < 30) {
    if(!inst.isNext() && (inst.state != 3)) { 
        inst.state = 3;
        inst.loadmore();
    }
    this.intervalYoutube = setTimeout(inst.updatePlayerInfo, 250);
}

---

setTimeout(expression, timeout); 在超时后运行代码/函数一次

setInterval(expression, timeout); 以间隔运行代码/函数，它们之间的超时长度