0

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

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

Youtube API 中没有实现视频的“当前时间”监听器，所以我要做的是YoutubePlayerInfo()在第一个播放器准备好时启动一个带有 setInterval 的函数。（当 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()一次吗？

4

1 回答 1

0

尝试使用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);以间隔运行代码/函数，它们之间的超时长度

于 2012-07-05T12:48:52.967 回答