setinterval seTtimeout

2024-02-24 20:08
文章标签 settimeout setinterval

本文主要是介绍setinterval seTtimeout,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

setTimeout和setInterval的使用

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。

 方 法

实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。

虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通过创建一个函数循环重复调用setTimeout,以实现重复的操作:

File: settimeout_setinterval.js


复制代码
showTime();

function  showTime()

{

    
var  today  =   new  Date();

    alert(
" The time is:  "   +  today.toString());

    setTimeout(
" showTime() " 5000 );

}
复制代码

一旦调用了这个函数,那么就会每隔5秒钟就显示一次时间。如果使用setInterval,则相应的代码如下所示:

File: settimeout_setinterval2.js

 

复制代码
setInterval( " showTime() " 5000 );

function  showTime()

{

    
var  today  =   new  Date();

    alert(
" The time is:  "   +  today.toString());

}
复制代码

这两种方法可能看起来非常像,而且显示的结果也会很相似,不过两者的最大区别就是,setTimeout方法不会每隔5秒钟就执行一次showTime函数,它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。

如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。

函数指针的使用

两个计时函数中的第一个参数是一段代码的字符串,其实该参数也可以是一个函数指针,不过Mac下的IE 5对此不支持。

如果用函数指针作为setTimeout和setInterval函数的第二个参数,那么它们就可以去执行一个在别处定义的函数了:

setTimeout(showTime, 500);

function showTime()

{

    var today = new Date();

    alert("The time is: " + today.toString());

}

另外,匿名函数还可以声明为内联函数:

setTimeout(function(){var today = new Date();

     alert("The time is: " + today.toString());}, 500);

 讨 论

如果对计时函数不加以处理,那么setInterval将会持续执行相同的代码,一直到浏览器窗口关闭,或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。

当setInterval调用执行完毕时,它将返回一个timer ID,将来便可以利用该值对计时器进行访问,如果将该ID传递给clearInterval,便可以终止那段被调用的过程代码的执行了,具体实现如下:

File: settimeout_setinterval3.js (excerpt)

复制代码
var  intervalProcess  =  setInterval( " alert('GOAL!') " 3000 );

var  stopGoalLink  =  document.getElementById( " stopGoalLink " );

attachEventListener(stopGoalLink, 
" click " , stopGoal,  false );

function  stopGoal()

{

    clearInterval(intervalProcess);

}
复制代码

只要点击了stopGoalLink,不管是什么时候点击,intervalProcess都会被取消掉,以后都不会再继续反复执行intervalProcess。如果在超时时间段内就取消setTimeout,那么这种终止效果也可以在setTimeout身上实现,具体实现如下:

File: settimeout_setinterval4.js (excerpt)

 

复制代码
var  timeoutProcess  =  setTimeout( " alert('GOAL!') " 3000 );

var  stopGoalLink  =  document.getElementById( " stopGoalLink " );

attachEventListener(stopGoalLink, 
" click " , stopGoal,  false );

function  stopGoal()
{
   clearTimeout(timeoutProcess);
}

这篇关于setinterval seTtimeout的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/743226

相关文章

setTimeout设置为0和nexttick 谁先执行谁后执行

在 Vue 中,setTimeout 设置为 0 和 Vue.nextTick 的执行顺序是不同的,它们基于 JavaScript 事件循环和微任务、宏任务的执行顺序来决定。 JavaScript 事件循环的基本执行顺序: 同步任务:先执行所有同步代码。 微任务(如 Promise.then、MutationObserver、process.nextTick):在同步任务执行完后,立即执行所

原生js实现轮播图-setInterval, setTimeout

原生js实现轮播图-setInterval, setTimeout 目录 文章目录 前言代码实现`setTimeout`和递归实现`setInterval` 效果展示 前言 利用原生js实现轮播图代码复制可用 代码实现 setTimeout和递归实现 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"

使用setInterval实现渐隐藏

//使用setInterval实现渐隐藏function myFadeout(ele){var target = 1,speed = 1/50;var timer = setInterval(function(){if(!parseFloat(ele.style.opacity) > 0){ele.style.opacity = 1;}if(target>0){target -= speed;el

【Javascript】setTimeout详解

setTimeout 是 JavaScript 中的一个非常有用的函数,用于安排一段代码在指定的时间延迟之后执行一次。它属于全局对象 window(在浏览器环境中)或 global(在 Node.js 环境中),因此可以直接调用它而无需引用任何特定的对象。 基本语法 setTimeout 的基本语法如下: setTimeout(function, delay, [arg1, arg2, ...

react如何解决setTimeout获取不到最新数据问题

在React中,setTimeout可能会由于闭包的特性获取不到最新的数据,因为当setTimeout的回调函数被定义时,它捕获的是那个时刻的状态,如果状态更新了但setTimeout还没执行,那么回调函数内使用的状态值将不会是最新的。 解决方案: 1.使用最新的状态值 通过使用React的 useRef hook来持有最新的状态值,确保在setTimeout的回调函数中访问的状态是最新的。 i

setInterval 定时任务执行时间不准验证

一般在处理定时任务的时候都使用setInterval间隔定时调用任务。 setInterval(() => {console.log("interval");}, 2 * 1000); 我们定义的是两秒执行一次,但是浏览器实际执行的间隔时间只多不少。这是由于浏览器执行 JS 是单线程模式,使用setInterval定时执行的回调只会在线程空闲时调用。 通过增加时间记录,对比每次调用的间隔

你可能不知道的setInterval的坑

你可能不知道的setInterval的坑 之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么。今天去摸索了下之后,决定来做个记录以免自己忘记,也希望让更多人了解到这个坑。 坑的地方 setInterval会无视代码的错误。就算遇到了错误,它还是会一直循环下去,不会停止。这就导致了可能你代码里存在着一些问题(比如你的代码可能有个一定概率下会发生的错误,而你使用se

setInterval最短极限有多快?

在几年前的一次测试里,几乎所有浏览器的定时器最短间隔都是64/1000秒,于是我默认了这个答案。但在今天无意中去测试了下,发现结果大不一样,所以要更新下过去的结论。       平时我们为了最频繁的速度执行某段代码,一般都写成setInterval(XXX, 1)。虽然明知是达不到1ms的间隔的,但我们总希望浏览器能尽可能快些。但浏览器究竟能到达多快呢?我们写个计数器测试下: v

Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

在js中遇到需要定时执行的任务时,可以使用setInterval和setTimeout,setTimeout还可以模拟网络延迟的现象。 Document自带的方法: 循环执行:var timeid = window.setInterval(“方法名或方法”,“延时”);window.clearInterval(timeid); 定时执行:var tmid = window.setTim

一文读懂 setTimeout 和 setInterval 的用法

文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 JavaScript 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。 这篇文章瑶琴带大家学习 Window的属性:setTimeout和setInterval。setTimeout 和 setInterval 是JavaScript中用于定时操作的两个非常重要的函数,它