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"));
    });
});

jQuery 点击延迟功能

jQuery delay function on click

jquery

delay