jQuery，延迟链接替换iframe目标

Question

我有一个简单的网格布局，有4个缩略图，每个缩略图里面都有一个链接，改变了位于页面顶部的单个iframe的目标。这些工作得很好，但我想在iframe的目标更改中添加一点延迟，以允许页面在每次单击后滚动到顶部。

我的iframe代码;

<iframe id="video-frame" name="video-frame" width="560" height="315" src="[youtube-url]" frameborder="0" allowfullscreen></iframe>

这是我的播放按钮代码(其中有4个，每个有不同的href值;

<a class="play-button" href="[youtube-url]">&nbsp;</a>

这是我的jQuery代码滚动到页面顶部在每个.play-button点击

$('.play-button').click(function(){
    $('html, body').animate({ scrollTop: 0 }, 500);
    $('#video-frame').attr("src", $(this).attr("href"));
});

我的问题是，改变iframe src会导致滚动出现故障，所以我需要添加一个650ms的延迟来改变iframe src，所以滚动已经完成

Answer 1

如果你想做的只是延迟运行一个函数，你可以尝试这样的函数:

$('.play-button').click(function(e){
    e.preventDefault();
    $('html, body').animate({ scrollTop: 0 }, 500);
    setInterval(function () {$('#video-frame').attr("src", $(this).attr("href"));}, 650);        
});

设置的间隔将在给定时间650之后运行一个函数在我们的例子中意味着650ms。试一试，如果不行就告诉我