how2j.cn

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

示例 1 :

只执行一次

函数setTimeout(functionname, 距离开始时间毫秒数 );
通过setTimeout在制定的毫秒数时间后,执行一次 函数functionname
本例在3秒钟后,打印当前时间。
解释:
document.getElementById 获取id=time的div元素
.innerHTML 修改该元素的内容
更多的关于如何获取元素,请参考 HTML DOM 获取元素
"); window.frames["iframe_show1169"].document.write(decodeHtml($("textarea#stepcodeTextarea1169").val())); window.frames["iframe_show1169"].document.close(); $(window.frames["iframe_show1169"]).load(function(){ $("#iframe_show1169").height($("#iframe_show1169").contents().find("body").height()+showittryitheight); }); $("#iframe_show1169").height($("#iframe_show1169").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<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>
"); window.frames["iframe1169"].document.write(decodeHtml(code1169)); window.frames["iframe1169"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1169"]).load(function(){ $("#iframe1169").height($("#iframe1169").contents().find("body").height()+showittryitheight); }); $("#iframe1169").height($("#iframe1169").contents().find("body").height()+showittryitheight); alreadyWriteCode1169 = code1169; $("#rendering1169").hide(); $("#rendered1169").show(); } var tRereshRetry2DemoPanel1169 = setInterval(rereshRetry2DemoPanel1169,1000); var binded1169 = false; $("textarea#stepcodeTextarea1169").keyup(function(){ if(!binded1169){ $(window).bind('beforeunload',function(){ binded1169 = true; return "xxxx"; }); } var newCode = $(this).val() code1169 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1169!=newCode){ // window.frames["iframe1169"].document.write("
"); // window.frames["iframe1169"].document.write(decodeHtml($("textarea#stepcodeTextarea1169").val())); // window.frames["iframe1169"].document.close(); // $(window.frames["iframe1169"]).load(function(){ // $("#iframe1169").height($("#iframe1169").contents().find("body").height()+showittryitheight); // }); // code1169 = newCode; // } }); $(".tryButton1169").click(function(){ $("#tryDiv1169").show(); $("#stepcodeTextarea1169").focus(); $("#stepcodeTextarea1169").height(200); $("#iframe1169").height(0); window.frames["iframe1169"].document.write("
"); window.frames["iframe1169"].document.write(decodeHtml($("textarea#stepcodeTextarea1169").val())); window.frames["iframe1169"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1169"]).load(function(){ $("#iframe1169").height($("#iframe1169").contents().find("body").height()+showittryitheight); }); $("#iframe1169").height($("#iframe1169").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1169.focus(); editor1169.setSize(null, "250"); $("#rendering1169").hide(); $("#rendered1169").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1169 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1169"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1169.on("change",function(doc){ if(!binded1169){ $(window).bind('beforeunload',function(){ binded1169 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1169 = newCode; $("textarea#stepcodeTextarea1169").val(newCode); if(alreadyWriteCode1169!=code1169){ lastModifedTime1169 = new Date().getTime(); $("#rendering1169").show(); $("#rendered1169").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1169 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1169.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1169").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


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

不停地重复执行

函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数,重复的时间间隔由第二个参数指定
"); window.frames["iframe_show1170"].document.write(decodeHtml($("textarea#stepcodeTextarea1170").val())); window.frames["iframe_show1170"].document.close(); $(window.frames["iframe_show1170"]).load(function(){ $("#iframe_show1170").height($("#iframe_show1170").contents().find("body").height()+showittryitheight); }); $("#iframe_show1170").height($("#iframe_show1170").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<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>
"); window.frames["iframe1170"].document.write(decodeHtml(code1170)); window.frames["iframe1170"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1170"]).load(function(){ $("#iframe1170").height($("#iframe1170").contents().find("body").height()+showittryitheight); }); $("#iframe1170").height($("#iframe1170").contents().find("body").height()+showittryitheight); alreadyWriteCode1170 = code1170; $("#rendering1170").hide(); $("#rendered1170").show(); } var tRereshRetry2DemoPanel1170 = setInterval(rereshRetry2DemoPanel1170,1000); var binded1170 = false; $("textarea#stepcodeTextarea1170").keyup(function(){ if(!binded1170){ $(window).bind('beforeunload',function(){ binded1170 = true; return "xxxx"; }); } var newCode = $(this).val() code1170 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1170!=newCode){ // window.frames["iframe1170"].document.write("
"); // window.frames["iframe1170"].document.write(decodeHtml($("textarea#stepcodeTextarea1170").val())); // window.frames["iframe1170"].document.close(); // $(window.frames["iframe1170"]).load(function(){ // $("#iframe1170").height($("#iframe1170").contents().find("body").height()+showittryitheight); // }); // code1170 = newCode; // } }); $(".tryButton1170").click(function(){ $("#tryDiv1170").show(); $("#stepcodeTextarea1170").focus(); $("#stepcodeTextarea1170").height(200); $("#iframe1170").height(0); window.frames["iframe1170"].document.write("
"); window.frames["iframe1170"].document.write(decodeHtml($("textarea#stepcodeTextarea1170").val())); window.frames["iframe1170"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1170"]).load(function(){ $("#iframe1170").height($("#iframe1170").contents().find("body").height()+showittryitheight); }); $("#iframe1170").height($("#iframe1170").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1170.focus(); editor1170.setSize(null, "250"); $("#rendering1170").hide(); $("#rendered1170").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1170 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1170"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1170.on("change",function(doc){ if(!binded1170){ $(window).bind('beforeunload',function(){ binded1170 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1170 = newCode; $("textarea#stepcodeTextarea1170").val(newCode); if(alreadyWriteCode1170!=code1170){ lastModifedTime1170 = new Date().getTime(); $("#rendering1170").show(); $("#rendered1170").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1170 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1170.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1170").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


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

终止重复执行

通过clearInterval终止一个不断重复的任务
本例,当秒是5的倍数的时候,就停止执行
"); window.frames["iframe_show1171"].document.write(decodeHtml($("textarea#stepcodeTextarea1171").val())); window.frames["iframe_show1171"].document.close(); $(window.frames["iframe_show1171"]).load(function(){ $("#iframe_show1171").height($("#iframe_show1171").contents().find("body").height()+showittryitheight); }); $("#iframe_show1171").height($("#iframe_show1171").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<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>
"); window.frames["iframe1171"].document.write(decodeHtml(code1171)); window.frames["iframe1171"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1171"]).load(function(){ $("#iframe1171").height($("#iframe1171").contents().find("body").height()+showittryitheight); }); $("#iframe1171").height($("#iframe1171").contents().find("body").height()+showittryitheight); alreadyWriteCode1171 = code1171; $("#rendering1171").hide(); $("#rendered1171").show(); } var tRereshRetry2DemoPanel1171 = setInterval(rereshRetry2DemoPanel1171,1000); var binded1171 = false; $("textarea#stepcodeTextarea1171").keyup(function(){ if(!binded1171){ $(window).bind('beforeunload',function(){ binded1171 = true; return "xxxx"; }); } var newCode = $(this).val() code1171 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1171!=newCode){ // window.frames["iframe1171"].document.write("
"); // window.frames["iframe1171"].document.write(decodeHtml($("textarea#stepcodeTextarea1171").val())); // window.frames["iframe1171"].document.close(); // $(window.frames["iframe1171"]).load(function(){ // $("#iframe1171").height($("#iframe1171").contents().find("body").height()+showittryitheight); // }); // code1171 = newCode; // } }); $(".tryButton1171").click(function(){ $("#tryDiv1171").show(); $("#stepcodeTextarea1171").focus(); $("#stepcodeTextarea1171").height(200); $("#iframe1171").height(0); window.frames["iframe1171"].document.write("
"); window.frames["iframe1171"].document.write(decodeHtml($("textarea#stepcodeTextarea1171").val())); window.frames["iframe1171"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1171"]).load(function(){ $("#iframe1171").height($("#iframe1171").contents().find("body").height()+showittryitheight); }); $("#iframe1171").height($("#iframe1171").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1171.focus(); editor1171.setSize(null, "250"); $("#rendering1171").hide(); $("#rendered1171").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1171 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1171"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1171.on("change",function(doc){ if(!binded1171){ $(window).bind('beforeunload',function(){ binded1171 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1171 = newCode; $("textarea#stepcodeTextarea1171").val(newCode); if(alreadyWriteCode1171!=code1171){ lastModifedTime1171 = new Date().getTime(); $("#rendering1171").show(); $("#rendered1171").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1171 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1171.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1171").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


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

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

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

假设setInterval调用的函数是printTime, 在printTime中调用document.write();
只能看到一次打印时间的效果。
这是因为document.write,会创建一个新的文档,而新的文档里,只有打印出来的时间字符串,并没有setInterval这些javascript调用,所以只会看到执行一次的效果。
"); window.frames["iframe_show1172"].document.write(decodeHtml($("textarea#stepcodeTextarea1172").val())); window.frames["iframe_show1172"].document.close(); $(window.frames["iframe_show1172"]).load(function(){ $("#iframe_show1172").height($("#iframe_show1172").contents().find("body").height()+showittryitheight); }); $("#iframe_show1172").height($("#iframe_show1172").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<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>

"); window.frames["iframe1172"].document.write(decodeHtml(code1172)); window.frames["iframe1172"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1172"]).load(function(){ $("#iframe1172").height($("#iframe1172").contents().find("body").height()+showittryitheight); }); $("#iframe1172").height($("#iframe1172").contents().find("body").height()+showittryitheight); alreadyWriteCode1172 = code1172; $("#rendering1172").hide(); $("#rendered1172").show(); } var tRereshRetry2DemoPanel1172 = setInterval(rereshRetry2DemoPanel1172,1000); var binded1172 = false; $("textarea#stepcodeTextarea1172").keyup(function(){ if(!binded1172){ $(window).bind('beforeunload',function(){ binded1172 = true; return "xxxx"; }); } var newCode = $(this).val() code1172 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1172!=newCode){ // window.frames["iframe1172"].document.write("
"); // window.frames["iframe1172"].document.write(decodeHtml($("textarea#stepcodeTextarea1172").val())); // window.frames["iframe1172"].document.close(); // $(window.frames["iframe1172"]).load(function(){ // $("#iframe1172").height($("#iframe1172").contents().find("body").height()+showittryitheight); // }); // code1172 = newCode; // } }); $(".tryButton1172").click(function(){ $("#tryDiv1172").show(); $("#stepcodeTextarea1172").focus(); $("#stepcodeTextarea1172").height(200); $("#iframe1172").height(0); window.frames["iframe1172"].document.write("
"); window.frames["iframe1172"].document.write(decodeHtml($("textarea#stepcodeTextarea1172").val())); window.frames["iframe1172"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1172"]).load(function(){ $("#iframe1172").height($("#iframe1172").contents().find("body").height()+showittryitheight); }); $("#iframe1172").height($("#iframe1172").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1172.focus(); editor1172.setSize(null, "250"); $("#rendering1172").hide(); $("#rendered1172").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1172 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1172"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1172.on("change",function(doc){ if(!binded1172){ $(window).bind('beforeunload',function(){ binded1172 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1172 = newCode; $("textarea#stepcodeTextarea1172").val(newCode); if(alreadyWriteCode1172!=code1172){ lastModifedTime1172 = new Date().getTime(); $("#rendering1172").show(); $("#rendered1172").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1172 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1172.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1172").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


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


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


关于 前端部分-JavaScript-计时器 的提问

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

上传截图