让 setTimeout() 与加载页面一起工作

我试图在页面加载后移动页面中的元素。我试图让元素加载，然后在三秒钟后移动。相反，元素只是在页面加载时立即移动。到目前为止，这是我的代码：

<!DOCTYPE html>

<html>

<style>

#container {

width: 400px;

height: 400px;

position: relative;

}

#animate {

width: 50px;

height: 50px;

position: absolute;

background-color: red;

}

</style>

</div>

var elem = document.getElementById("animate");

function myMove(element) {

var posx = 0;

var posy = 25;

var opacity = 0;

var id = setInterval(frame, 40);

function frame() {

if (posx == 10) {

clearInterval(id);

} else {

posx++;

opacity = opacity + .1

element.style.top = posy + "%";

element.style.left = posx + "%";

element.style.opacity = opacity;

}

document.getElementById("body").addEventListener("load", setTimeout(myMove(elem), 3000))

</script>

</body>

</html>

杨魅力

浏览 148回答 3

3回答

繁星点点滴滴

你需要做setTimeout(() => myMove(elem), 3000)否则它会为任何myMove(elem)返回设置超时，这意味着myMove(elem)立即运行

翻过高山走不出你

所以基本上你需要这个：// Run at DOM loadeddocument.addEventListener("DOMContentLoaded", function() {  console.log('DOM is loaded');  // Move  setTimeout(function(){ myMove(elem); }, 3000)});或者// Run at full page loadwindow.addEventListener("load", function() {  console.log('Page is loaded');  // Move  setTimeout(function(){ myMove(elem); }, 3000)});

红糖糍粑

目前，这些myMove方法会立即执行。为避免这种情况，您可以使用 ES6 中支持的箭头函数或移动myMove到一个函数使用箭头函数（在 ES6 中支持）：document.getElementById('body').addEventListener(  'load',  setTimeout(() => myMove(elem), 3000),);转换为函数document.getElementById('body').addEventListener(  'load',  setTimeout(function () {    myMove(elem);  }, 3000),);

随时随地看视频慕课网APP