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函数的有趣部分，每250ms调用一次。

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部分很慢且setInterval有250ms，因此“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);以间隔运行代码/函数，它们之间的超时长度

setinterval javascript的ajax问题

1 个答案: