怎么让html里的js脚本延迟5秒运行?
发布网友
发布时间：2022-04-27 08:02
共7个回答
懂视网
时间：2022-05-12 08:48
说到JavaScript中的延迟脚本，早在HTML4.01的时候已经有了这样的属性。使用起来很方便，那就是在外部引用的script标签上加一个”defer”属性。加了”defer”属性，就不会影响页面的构造了。也就是说，脚本会加载但是不运行，等到页面全部加载完之后按顺序执行。为了能够更加理解，请看下面的例子。
在这个例子中，会有a.html文件，这个文件中引用的script标签没有添加延迟脚本的属性，而b.html文件添加了延迟脚本的属性。分别有两个JavaScript文件，分别是a.js和b.js，两个文件中各弹出自己文件的名字，以作示范。
a.js代码
alert("a");
b.js代码
alert("b");a.html代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"> <title>梦龙</title> <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> </head> <body> <p class="a"> 梦龙小站 </p> </body> </html>
b.html代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"> <title>梦龙</title> <script type="text/javascript" defer="defer" src="a.js"></script> <script type="text/javascript" defer="defer" src="b.js"></script> </head> <body> <p class="a"> 梦龙小站 </p> </body> </html>
上面的例子可以看出。虽然我们是在head标签中引用的a.js和b.js，但是由于我们设置了”defer”属性。所以引用的a.js和b.js会加载，只不过得在浏览器遇到标签之后再执行。由于浏览器解析延迟属性不一样，延迟脚本执行的顺序是不一样的。“defer”属性只适用于外部引用JavaScript文件，会忽略其他几种方法引用JavaScript文件的方法。
支持的浏览器有：IE9、Firefox 3.5、safari 5和chrome。其他不支持的浏览器会像正常一样加载和处理脚本。
热心网友
时间：2022-05-12 05:56
通过setTimeout函数调用。如下：
setTimeout( function(){
//add your code
}, 5 * 1000 );//延迟5000毫米
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
扩展资料
延迟运行，setTimeout函数用法的具体事例：
<script language="javascript">
function test(obj)
{
alert(obj);
setTimeout("test()",1000);
}
</script>
<input id="testButton" type="button" onclick="test(this)">
setTimeout里的test()没带参数，第一次显示[object]，1000毫秒之后显示undefined，变量尚未赋值，也就是说用此方式可以实现带参数的方法循环，但是参数被销毁。
其实这很简单就可以实现，不必写那么长的代码来实现。
参考资料
百度百科-setTimeout
热心网友
时间：2022-05-12 07:14
//add your code
}, 5 * 1000 );//延迟5000毫米
热心网友
时间：2022-05-12 08:49
{
var script = document.createElement("script");
script.setAttribute("src","http://www.abc.com/js/1.js");
script.setAttribute("charset","gb2312");
document.getElementByTagsName("head")[0].appendChild(script);
}
热心网友
时间：2022-05-12 10:40
<html>
<head>
</head>
<body>
<script>
function func(){
document.write("<scr"+"ipt type=\"text/javascript\" src=\"http://www.abc.com/js/1.js\" charset=\"gb2312\"></sc"+"ript>");
}
setTimeout(func,"5000");
</script>
</body>
</html>追答
function func(){
document.write("");
}
setTimeout(func,"5000");
那入在HEAD之中看看呢?
追问不行的，放到head里，效果一样。
热心网友
时间：2022-05-12 12:48
defer 属性
async 属性
动态创建DOM方式
使用jQuery的getScript方法
使用setTimeout延迟方法
让JS最后加载
热心网友
时间：2022-05-12 15:13
拖动滚动条可以加载显示的数据
里面有教程和源码
