how2j.cn

关键字 简介 示例代码
setTimeout
只执行一次
示例代码
setInterval
不停地重复执行
示例代码
clearInterval
终止重复执行
示例代码
document.write()
不要在setInterval调用的函数中使用document.write();
示例代码
示例 1 : 只执行一次   
示例 2 : 不停地重复执行   
示例 3 : 终止重复执行   
示例 4 : 不要在setInterval调用的函数中使用document.write();   

函数setTimeout(functionname, 距离开始时间毫秒数 );
通过setTimeout在制定的毫秒数时间后,执行一次 函数functionname
本例在3秒钟后,打印当前时间。
解释:
document.getElementById 获取id=time的div元素
.innerHTML 修改该元素的内容
更多的关于如何获取元素,请参考 HTML DOM 获取元素
运行效果
<script> function printTime(){ var d = new Date(); var h= d.getHours(); var m= d.getMinutes(); var s= d.getSeconds(); document.getElementById("time").innerHTML= h+":"+m+":"+s; } function showTimeIn3Seconds(){ setTimeout(printTime,3000); } </script> <div id="time"></div> <button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>
<script>
 
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
 
}

function showTimeIn3Seconds(){
   setTimeout(printTime,3000);  
}
 
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

不停地重复执行

edit
函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数,重复的时间间隔由第二个参数指定
运行效果
<p>每隔1秒钟,打印当前时间</p> <div id="time"></div> <script> function printTime(){ var d = new Date(); var h= d.getHours(); var m= d.getMinutes(); var s= d.getSeconds(); document.getElementById("time").innerHTML= h+":"+m+":"+s; } var t = setInterval(printTime,1000); </script> <br><br>
<p>每隔1秒钟,打印当前时间</p>
  
<div id="time"></div>
  
<script>
  
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  
}
  
var t = setInterval(printTime,1000);
  
</script>

<br><br>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

终止重复执行

edit
通过clearInterval终止一个不断重复的任务
本例,当秒是5的倍数的时候,就停止执行
运行效果
<p>每隔1秒钟,打印当前时间</p> <div id="time"></div> <script> var t = setInterval(printTime,1000); function printTime(){ var d = new Date(); var h= d.getHours(); var m= d.getMinutes(); var s= d.getSeconds(); document.getElementById("time").innerHTML= h+":"+m+":"+s; if(s%5==0) clearInterval(t); } </script> <br>
<p>每隔1秒钟,打印当前时间</p>
  
<div id="time"></div>
  
<script>
  
var t = setInterval(printTime,1000);

function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  if(s%5==0)
     clearInterval(t);
}
  
</script>
<br>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

不要在setInterval调用的函数中使用document.write();

edit
注:部分浏览器,比如firefox有这个问题,其他浏览器没这个问题。

假设setInterval调用的函数是printTime, 在printTime中调用document.write();
只能看到一次打印时间的效果。
这是因为document.write,会创建一个新的文档,而新的文档里,只有打印出来的时间字符串,并没有setInterval这些javascript调用,所以只会看到执行一次的效果。
运行效果
<p>每隔1秒钟,通过document.write打印当前时间</p> <script> function printTime(){ var d = new Date(); document.write(d.getHours()); document.write(":"); document.write(d.getMinutes()); document.write(":"); document.write(d.getSeconds()); document.close(); } var t = setInterval(printTime,1000); </script>
<p>每隔1秒钟,通过document.write打印当前时间</p>

<script>

function printTime(){
  var d = new Date();
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());
  document.close();
}

var t = setInterval(printTime,1000);

</script>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-06-09 在setInterval里面使用document.write之后只能看到一次执行结果,是因为有document.close的缘故吧。。
yanwuhc




把document.close注释掉之后就可以看到多次的执行结果。
<p>每隔1秒钟,通过document.write打印当前时间</p>
 
<script>
 
function printTime(){
  var d = new Date();
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());
  // document.close();
}
 
var t = setInterval(printTime,1000);
 
</script>

							


1 个答案

Yui2333
答案时间:2020-06-26
谷歌浏览器有没有document.close()都可以刷新 但Edge好像不行



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-05-09 设置间隔更简洁的做法
福工刘德华

<script> setInterval(() => { var d=new Date(); var h=d.getHours(); var m=d.getMinutes(); var s=d.getSeconds(); var time=h+":"+m+":"+s; document.write(time); document.close(); }, 1000); </script>







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-02-07 第一句没了
2019-09-07 这样写简洁点
2019-06-16 示例4测试


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 5 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-JavaScript-计时器 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图