【前端】setInterval()和setTimeout() 方法

最新推荐文章于 2024-05-08 19:50:40 发布
最新推荐文章于 2024-05-08 19:50:40 发布
阅读量221 收藏
点赞数
分类专栏： 前端。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42007423/article/details/88823934
版权

setInterval()和setTimeout() 方法

setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法
setInterval(code,millisec[,“lang”])

参数描述
code必需。要调用的函数或要执行的代码串。
millisec必需。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

实例

<html>
<body>

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>

</body>
</html>

setTimeout()

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法
setTimeout(code,millisec)

参数描述
code必需。要调用的函数后要执行的 JavaScript 代码串。
millisec必需。在执行代码前需等待的毫秒数。

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

实例

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
<p>Click on the button above. An alert box will be
displayed after 5 seconds.</p>
</body>

</html>
Rjxxxx。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简述js定时器的用法
suorce的博客
09-25 1万+
js常用的定时器方法有三个 setTimeout(“js语句”,定时时间) setInterval(“js语句”,定时时间) clearTimeout(需要停止的对象) 注意：这里的定时时间单位都为毫秒 下面我们来看一下它们的用法： setTimeout() 单次定时，即setTimeout的第一个参数的js语句只会定时实现一次。 比如： word = setTimeout(&amp;quot;showWord...
前端基础(十三)_定时器（间歇定时器、延迟定时器）
见贤思齐焉，见不贤内自省
01-12 2386
定时器（间歇定时器、延迟定时器）
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-08 2582
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
setTimeout用法——避免重复性触发操作
浪浪荡荡我的人生
10-30 2366
btn的click事件，每次点击都会执行给定的function，如果function复杂的话，很容易消耗内存 解决方法——setTimeout延时处理。 给function做延迟处理，比如600毫秒后执行，如果在600毫秒内再次触发方法，则将之前的timeout清除。 关键代码： let isr = false let timer = null let oBtn = document.getElementById('oBtn') oBtn.onclick = function ()
《前端》 setInterval() 方法、clearInterval() 方法、 setTimeout() 方法、clearTimeout() 方法
BelleDiao的博客
06-03 1634
定时和取消定时： setInterval() 方法、clearInterval() 方法、setTimeout() 方法、clearTimeout() 方法 一.setInterval与setTimeout的区别 setInterval setInterval()方法可按照指定的周期来调用函数或者计算表达式（以毫秒为单位） 语法： setInterval(函数表达式, 毫秒数); setInterval(function, 函数表达式, param1, param2, ...) se..
js实现实时刷新(setInterval、WebSocket、EventSource)
muzidigbig的博客
12-06 1433
可能有很多的同学有用 setInterval 控制 ajax 不断向服务端请求最新数据的经历看下面的代码：当结果返回之后再延时触发下一次的请求，这样虽然没办法保证两次请求之间的间隔时间完全一致但是至少可以保证数据返回的节奏是稳定的，看似已经实现了需求但是这么搞我们先不去管他的性能就代码结构也算不上优雅，为了解决这个问题可以让服务端长时间和客户端保持连接进行数据互通h5新增了和 EventSource 用来实现长轮询，下面我们来分析一下这两者的特点以及使用场景。
VUE中setTimeout和setInterval自动销毁案例
10-14
主要介绍了VUE中setTimeout和setInterval自动销毁案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈JavaScript中setInterval和setTimeout的使用问题
10-23
主要介绍了浅谈JavaScript中setInterval和setTimeout的使用问题,作者建议在任务庞大时尽量避免使用setInterval,需要的朋友可以参考下
仅IE不支持setTimeout/setInterval函数的第三个以上参数
09-05
setTimeout/setInterval，这两个函数相信前端开发同学都很熟悉。它们在非IE(6-9)浏览器中还可以如下使用
for循环 + setTimeout 结合一些示例(前端面试题）
12-11
在日常编码中，你会发现，给 setTimeout 和 setInterval 设定延迟时间往往并不准，或者干脆 setTimeout(function(){xxx},0) 也不是立马执行（特别是有耗时代码在前），这是因为 js 是单线程的，有一个事件队列机制，...
js前端如何写一个精确的倒计时代码
01-19
关于写倒计时大家可能都都比较熟悉，使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题，但是如果是长时间的倒计时，这样写就会不准确。如果用户修改了他的设备时间，这样的倒...
JavaScript：setInterval() 用法详解
热门推荐
孙悟空
06-03 2万+
本文介绍了js中setInterval() 的用法，如何使用，如何停止。
详解 setTimeout 实现机制与原理，手写一个实现
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-29 3930
面试官也在看的前端面试资料setTimeout 方法，就是一个定时器，用来指定某个函数在多少毫秒之后执行。它会返回一个整数，表示定时器的编号，同时你还可以通过该编号来取消这个定时器：fun...
前端基础学习之js-setInterval（定时器）、setTimeout（一次性定时器）
no pains,no gains
08-31 587
1.setInterval()和clearInterval() setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 setInterval(code,millisec[,“lang”]) clearInterval(id_of_setinterval) 2.setTimeout()和clearTimeout() setTimeout() 方
前端javascript使用定时查询setInterval()需要注意的问题
weixin_44656298的博客
11-02 1257
** 记录一下前端使用定时查询setInterval()遇到的问题。 ** 有问题的定时查询方法 一般来说，我们会使用下面代码来执行定时查询方法 var timer = null; // 需要定时查询的方法 function getData(){ getOnlineData().then(() => { // 数据查询 console.log('实时数据查询成功'); }) } // 调用定时查询的方法 function setTimer (){ getData();
前端开发：JS中setTimeout和setInterval的对比使用
软贱开发攻城狮
05-17 1538
前言 在前端开发过程中，关于计时器的使用是非常常用的知识点，也是非常重要的，尤其是需要规定延迟多久之后再去执行某个操作。在JS的计时器使用中有setTimeout和setInterval，二者都是定时器，但是它们是有差异性的。无论是在实际开发使用还是求职面试的时候，setTimeout和setInterval的对比使用都是非常重要的知识点，那么本篇博文就来分享一下关于setTimeout和setInterval的对比使用吧。 JS定时器 JS的定时器有两个方法：setTimeout()和set
前端 延时器 setTimeout 和定时器 setInterval 注意事项
lzfengquan的博客
12-09 6208
不管是vue还是react项目中，我们多多少少都会用到延时器和定时器，我目前项目中延时器用的最多，定时器几乎不用 理解概念： 延时器：setTimeout ， 顾名思义延时就是不会立即执行会等到设置的时间到了之后立即执行，也就是说只有满足条件的时候才会执行且只会执行一次。 var Date1 = setTimeout(function() { console.log(new Date()) },1000) // 1秒后执行打印功能 定时器：setInterval，字面意思就是定时多久执行，也就是说会
前端页面定时执行方法setInterval()
Linweiqiang5的博客
06-18 1423
1.例如：每3秒执行一次弹出提示 var s=setInterval(function(){ alert("Hello"); }, 3000); 2.满足要求可以清空 clearInterval(s);
setTimeout和setInterval
08-24
settimeout和setinterval是JavaScript中的两个定时器函数。 settimeout函数用于在指定的时间后执行一次函数，语法为：setTimeout(function, milliseconds)。其中，function是要执行的函数，milliseconds是延迟的毫秒数。 setinterval函数用于每隔一定时间执行一次函数，语法为：setInterval(function, milliseconds)。其中，function是要执行的函数，milliseconds是间隔的毫秒数。 这两个函数在前端开发中非常常用，可以用来实现定时刷新、轮播图、倒计时等功能。但是需要注意的是，使用这两个函数时要注意内存泄漏问题，及时清除定时器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值