SetTimeOut方法用法示例

最新推荐文章于 2023-08-14 10:33:33 发布
原创 最新推荐文章于 2023-08-14 10:33:33 发布 · 572 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #button #border #function #table #date

本文提供了一个使用JavaScript实现定时更新显示当前时间的HTML页面示例。通过设置定时器每秒更新页面上的时间显示，展示了基本的网页动态元素更新方法。
2006年01月07日 21:05:00

(一).示例图片效果

(二).代码

>html<
>head<
>title/title<
>script laguage="javascript"<
>!--
function showtime()
{
mytime=new Date();
mytime=mytime.getHours()+":"+mytime.getMinutes()+":"+mytime.getSeconds();
document.myform.mytext.value=mytime;
window.clearTimeout(mytimeout);
var mytimeout=window.setTimeout("showtime()",1000)
}

//--<
>/script<
>/head<
>body bgcolor="#FFFFFF" text="#000000"<
>form name="myform"<
>table border=0 align=center<
>tr<
>td<>input type=text name=mytext size=20 style="background-color:lightgreen;color:blue"<>/td<
>td<>input type=button value="设置时间" onclick=window.setTimeout("showtime()",1000) style="background-color:lightblue;"<>/td<
>/tr<
>/table<
>/form<
>/body<
>/html<



Trackback: http://tb.blog.youkuaiyun.com/TrackBack.aspx?PostId=573114


softart
关注
js setTimeout opener的用法示例详解
01-19
} setTimeout : 延迟多长时间执行什么方法，具体使用：//www.jb51.net/article/35535.htm opener: 指parent表示父窗口，比如一个A页面利用iframe或frame调用B页面，那么A页面所在窗口就是B页面的parent。...
javascript中setTimeout和setInterval的unref()和ref()用法示例
12-12
unref()和ref()用法非常的简单，就是取消和回复setTimeout和setInterval函數的調用的。 代码如下： 代码如下:  var testFunction=function(){  console.log(“guoyansi”);  }  var timer=setInterval(test...
Window moveBy() 方法
iteye_5722的博客
02-20 336
定义和用法 moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。 语法 window.moveBy(x,y)     实例 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="gb2312"&gt; &lt;title&gt;moveBy&lt;/title&gt;
windows.moveBy()函数使用方法示例
软件开发资料汇总
12-14 581
(一).示例图片效果(二).代码window.setTimeout()函数function showtime(){mytime=new Date();mytime=mytime.getHours()+":"+mytime.getMinutes()+":"+mytime.getSeconds();document.myform.mytext.value=mytime;window.clearTi
20. Window moveBy() 方法
enlyhua的专栏
07-31 572
定义和用法 moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。 语法window.moveBy(x,y)实例 下面的例子将把窗口相对其当前位置移动 50 个像素：<html> <head> <script type="text/javascript"> function moveWin() { myWindow.moveBy(50,50) } </script> </h
js 动态显示时间（setTimeout）
写博客只为学习
05-23 413
[code="js"] // 全局变量 var timeoutId ; //开始执行 timeoutId = setTimeout(showTime,1000); function showTime(){ //清除定时器 clearTimeout(timeoutId); date = new Date(); var year...
js中settimeout方法加参数的使用实例
10-26
使用 `setTimeout` 方法时，有时需要将参数传递给回调函数，但是在早期的JavaScript示例中，尤其是在W3School网站上，通常只演示了不带参数的 `setTimeout` 使用方法。本篇文档将详细解释如何在 `setTimeout` 中正确...
for循环 + setTimeout 结合一些示例(前端面试题）
10-19
以上知识点总结了在使用`for`循环结合`setTimeout`时可能遇到的作用域问题，以及如何通过不同的方法解决这一问题。掌握这些知识点对于JavaScript编程来说至关重要，尤其是在处理异步编程和事件驱动编程时。理解这些...
JavaScript--moveBy的用法
BarryLee的博客
07-10 1838
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;moveBy的用法&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 先新开一个窗口，然后点击移动窗口按钮，窗口就可以移动了
cocos 《吃星星》----使用moveBy（）和动画系统 实现跳跃动画
qq_34838859的博客
12-13 862
一、为场景中的角色添加player.js脚本 脚本代码为： cc.Class({ extends: cc.Component, properties: { jumpHeight:0, jumpDuration:0, maxMoveSpeed:0, accel:0 }, setJumpAction:f...
setTimeout详解
weixin_30655219的博客
06-23 205
一、setTimeout基础 setTimeout(func|code,delay); 第一个参数表示将要推迟的函数名或者一段代码，第二个参数表示推迟执行的毫秒数 eg: console.log(1); setTimeout('console.log(2)',1000); console.log(3); answer: 1 3 2 ＊...
setTimeout() setInterval()
catherine的博客
10-09 316
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。(只执行一次) 提示： 1000 毫秒= 1 秒。 提示： 如果你只想重复执行可以使用 setInterval() 方法。 提示： 使用clearTimeout() 方法来阻止函数的执行。 写法： 3 秒（3000 毫秒）后弹出 "Hello" : setTimeout(func
setInterval和setTimeout
李欢欢的博客
10-09 947
1. 总结 1.1. setTimeout和setInterval()的时间间隔是不可动态修改的 1.1.1. 错误方式 1.1.2. 正确方式 1.2. setInterval()方法的弊端 1.2.1. setInterval间歇问题 1.2.2. 遇到错误不会停止 1.3. clearTimeout()和 clearInterval() 1.4. this 2. win...
在Qt使用moveToThread()
porridgeCooker的专栏
05-31 7323
为啥我写不来那么详细的博客= =，我
matlab 定时器开始无法停止,计时器程序无法停止计时
weixin_29064103的博客
03-24 696
您想要的是计时，而你写的是时间的，有点矛盾，计时器用setTimeout()比较好，看下我的代码：(注意看下注释部分)htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档vari;varnum=0;functi...
setTimeout传参数问题
开满向日葵的地方
06-13 8543
        setTimeout传参数问题，弄了很久，终于解决了，O(∩_∩)O哈！ function timeClick(obj) { // var obj=document.getElementById(''); obj.style.backgroundColor="gray"; obj.onclick=function(){ return false;}; setTimeout(
asp.net后台等待几秒执行程序或者跳转页面
01-07 4343
下面是几种Asp.net后台cs中，几种让页面等待几秒或一定时间后，再执行下一步操作的方法： 1、Response对象跳出转向 代码：Response.Write( " "); 2、通过Thread方法 代码：System.Threading.Thread.Sleep(3000); 注：这种方法便捷，但不是很科学，它是使系统休眠一定时间 3、跳转函数 代码：ClientScript
setTimeout怎么用【详细讲解】
z2000ky的博客
08-14 2476
不保证在指定的毫秒数之后立即执行，它只是将函数放入异步任务队列中，并在队列中的等待时间过后执行。如果队列中有其他任务需要执行，那么可能会稍微延迟执行。是 JavaScript 提供的一个函数，用于在指定的时间延迟后执行一段代码（函数）。将会在 2000 毫秒（2秒）后被打印出来。
setTimeout使用方法
最新发布
03-26
<think>嗯，用户想了解JavaScript中setTimeout的用法和示例。首先，我需要回忆一下setTimeout的基本功能。记得setTimeout是用来在指定的时间后执行一次代码的函数，属于异步操作，不会阻塞主线程。 接下来，我应该整理它的语法结构。正确的语法是setTimeout(function, delay, [arg1], [arg2], ...)，其中第一个参数是要执行的函数，第二个是延迟的毫秒数，后面的是可选的传入参数。需要确保用户知道参数顺序和可选参数的使用。 然后，应用场景部分需要举几个常见的例子。比如延迟显示提示信息、页面加载后的操作、动画效果等。这些例子能帮助用户理解实际用途。 关于注意事项，要强调清除定时器的重要性，可以用clearTimeout。还有延迟时间的准确性问题，因为JavaScript是单线程的，可能存在延迟。此外，this指向的问题，如果用箭头函数或者在回调中绑定上下文。 示例代码部分，先给一个基础用法，比如延迟弹出提示。然后展示带参数的用法，比如传递用户名。再演示如何用clearTimeout取消执行，这对用户处理交互可能很有用。最后，可以用setTimeout模拟简单的动画，比如移动元素，虽然实际中可能用requestAnimationFrame更好，但作为示例没问题。 需要检查是否所有代码示例都正确，比如函数调用、参数传递是否正确。另外，注意使用中文注释，方便用户理解。 引用部分要对应参考资料里的内容，用户提供的引用[1]和[2]提到setTimeout只执行一次，非阻塞I/O，这些要在回答中自然地加入引用标识，比如在解释异步特性时引用[^2]。 最后，生成相关问题要考虑用户可能进一步想知道的内容，比如与setInterval的区别、替代方案、异步处理机制、参数传递方法以及如何解决this指向的问题。这些问题能帮助用户深入学习相关知识点。 整个回答结构要清晰，分点说明，确保用户能逐步理解setTimeout的使用方法和注意事项，同时提供实际示例增强理解。</think>### JavaScript setTimeout() 使用方法详解 #### 1. 核心语法 `setTimeout()` 用于在指定延迟时间（毫秒）后执行函数或代码片段，**仅执行一次**。基本语法为： ```javascript setTimeout(function, delay, [arg1], [arg2], ...); ``` - `function`：需要执行的函数或代码字符串（不推荐） - `delay`：延迟时间（单位：毫秒，默认值为0） - `[arg1], [arg2]`：可选参数，传递给函数的参数[^1] #### 2. 基础用法示例 ```javascript // 示例1：延迟显示提示 setTimeout(() => { console.log('3秒后显示这条消息'); }, 3000); // 示例2：带参数传递 function greet(name) { console.log(`你好，${name}!`); } setTimeout(greet, 2000, '张三'); ``` #### 3. 清除定时器 使用 `clearTimeout()` 可取消未执行的定时任务： ```javascript const timerId = setTimeout(() => { console.log('这条消息不会显示'); }, 1000); clearTimeout(timerId); ``` #### 4. 进阶应用场景 ```javascript // 页面加载后延迟操作 window.onload = () => { setTimeout(() => { document.body.style.backgroundColor = '#f0f0f0'; }, 500); }; // 简单动画实现（示例：元素右移） const box = document.getElementById('box'); function move() { let position = 0; const animate = () => { position += 5; box.style.left = position + 'px'; if (position < 200) { setTimeout(animate, 50); } } animate(); } ``` #### 5. 重要注意事项 - **延迟精度**：实际执行时间可能略长于设定值（受事件循环影响） - **上下文绑定**：建议使用箭头函数或`.bind()`保持`this`指向 - **内存管理**：及时清除不再需要的定时器 - **最小延迟**：现代浏览器默认最小延迟为4ms（嵌套超过5层时） #### 6. 异步执行验证 ```javascript console.log('开始'); setTimeout(() => console.log('异步输出'), 0); console.log('结束'); // 输出顺序：开始 → 结束 → 异步输出 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值