Question

我有一个vimeo视频，我想在点击一个按钮后3秒播放。我可以通过点击播放视频，但我似乎无法在正确的位置获得setTimeout ...有什么建议吗？

var iframe1 = document.getElementById("prelearn-1");
var player1 = $f(iframe1);

var prelearnBtn = document.getElementById("prelearn-1-btn");
prelearnBtn.addEventListener("click", setTimeout(function(){player1.api("play")}, 3000));

我正在使用vimeo froogaloop API。

Answer 1

将其包装在函数中 -

prelearnBtn.addEventListener("click", function(){
    setTimeout(function(){
        player1.api("play");
    }, 3000);
});

Answer 2

setTimeout函数接受回调函数。只需将代码包装在一个匿名函数中，它就可以工作了。此外，如果您尝试访问iFrame的内容，则可能会遇到跨域问题。

var iframe1 = document.getElementById("prelearn-1");
var player1 = $f(iframe1);

var prelearnBtn = document.getElementById("prelearn-1-btn");
prelearnBtn.addEventListener("click", function(){setTimeout(function(){player1.api("play")}, 3000)});

Answer 3

AddEventlistener将匿名函数作为第二个参数。所以你需要将setTimeout包装在匿名函数中。每当click事件发生时，setTimeout代码将触发并播放视频。

prelearnBtn.addEventListener("click", function () {
    setTimeout(function () {
        player1.api("play")
    }, 3000)
}, false);

Answer 4

ES2015 较短的语法+利用setTimeout的 3rd参数将使我们的代码更短，更美观，同时保持可读性：

document.querySelector('button').addEventListener("click",() => 
  setTimeout(console.log, 1000, "play")
)

<button>Play</button>

为了打印自变量，上面的示例用player1.api替换了OP的console.log方法，这说明了代码的工作原理。

使用addEventListener解决setTimeout问题

4 个答案: