点击时的 jQuery 延迟功能

Question

我在尝试延迟单击事件上执行的函数时遇到一些问题。

我有一系列链接，每个链接的 href 都是唯一的 YouTube 视频嵌入 URL。我想要做的是使用这些 YouTube URL 之一切换页面上 iframe 的源。但我试图在页面滚动回顶部时延迟切换。

我创建了一个Fiddle这更好地说明了我的观点。

我本来就有这个JS函数；

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

这对于滚动页面和切换 iframe 都有效，但是在切换 iframe 源时滚动页面会使滚动动画有点不稳定，这并不理想。

对此的任何帮助都会很棒。

提前致谢。

Answer 1

无需使用 setInterval 或 setTimeout。 The animate method accepts a complete callback动画完成时运行。

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