setTimeout 与 setInterval —— 实现优雅轮询

文章目录

1 定义与用法
- 1.1 setTimeout
- - 1.1.1 定义
  - 1.1.2 用法
  - 1.1.3 技术细节
- 1.2 setInterval
- - 1.2.1 定义
  - 1.2.2 用法
  - 1.2.3 技术细节
2 setInterval缺陷
- 2.1 无视代码错误
- 2.2 无视网络延迟
- 2.3 不保证间隔执行
3 优雅轮询

1 定义与用法

1.1 setTimeout

1.1.1 定义

在指定的毫秒数后调用函数或计算表达式

1.1.2 用法

setTimeout(code/function, milliseconds, param1, param2, ...)

1.1.3 技术细节

code/function ：必需，要调用一个代码串，也可以是一个函数
milliseconds ：可选，执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0 ，最短为4ms
param1, param2 ：可选，传给执行函数的其他参数
返回值：返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行

const fun = (param1, param2) => {console.log(param1, param2);
}
setTimeout(fun)
setTimeout(fun, 1000, 'param1', 'param2')

1.2 setInterval

1.2.1 定义

按照指定的周期（以毫秒计）来调用函数或计算表达式

1.2.2 用法

setInterval(code/function, milliseconds, param1, param2, ...)

1.2.3 技术细节

code/function ：必需，要调用一个代码串，也可以是一个函数
milliseconds ：必需，周期性调用 code/function 之间的时间间隔，以毫秒计，最短为10ms
param1, param2 ：可选，传给执行函数的其他参数
返回值：返回一个 ID（数字），可以将这个ID传递给 clearInterval() 来取消执行

const fun = (param1, param2) => {console.log(param1, param2);
}
// setInterval(fun) //milliseconds 参数必须，否则疯狂执行代码块
setInterval(fun, 1000, 'param1', 'param2')

2 setInterval缺陷

2.1 无视代码错误

即使调用的代码报错了， setInterval 还是会周期性调用代码块

let count = 1
setInterval(() => {count++console.log(count);if(count > 3) throw new Error('setInterval 报错')
}, 1000)

改用 setTimeout

let count = 0
const fun = () =>{setTimeout(() => {count++console.log(count);if(count > 3) throw new Error('setTimeout 报错')fun()}, 1000);
}
fun()

2.2 无视网络延迟

在使用 Ajax 轮询服务器是否有新数据时，如果网络状态不佳，一个接口下发后还没有返回结果，此时 setInterval 还是会周期性调用代码块，导致客户端网络队列塞满 Ajax 请求

const http = () => {return new Promise((resolve) => {setTimeout(() => {resolve()}, 3000);})
}
setInterval(async () => {await http()console.log('setInterval');
}, 1000)

改用 setTimeout

const http = () => {return new Promise((resolve) => {setTimeout(() => {resolve()}, 3000);})
}
const fun = () =>{setTimeout(async () => {await http();console.log('setTimeout');fun()}, 1000);
}
fun()

2.3 不保证间隔执行

setInterval 周期性添加执行器到任务队列，如果调用的代码执行的时间大于设置时间间隔，它会跳过调用，这就导致漏执行

3 优雅轮询

递归调用 setTimeout() ，不需要后调用 clearTimeout() 清除定时器

let timer = null
const interval = () => {timer = setTimeout(() => {// 执行代码块interval()}, 1000)
}
interval()
// 清除
setTimeout(() => {clearTimeout(timer)
}, 5000);

setTimeout 与 setInterval —— 实现优雅轮询相关推荐

nodejs的事件轮询机制
/* 面试题:nodejs的事件轮询机制*/setTimeout(function() {console.log('setTimeout()') }, 0)setImmediate(function( ...
JavaScript中setTimeout实现轮询 (vs setInterval)
setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,次数是一次. setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达 ...
js setInterval+setTimeout定时器轮询+终止轮询
常见的轮询方式: window.timer = setInterval(()=>{this.promiseFun()},1000) 大家一般都会使用setInterval,但要注意单纯使用它可能 ...
使用setInterval对ajax请求做轮询
为什么setInterval 只执行了一次?? 代码如下 <script language=javascript> $(function () { var test ...
关于MultiActionController异步请求Ajax,pc端正常，手机端报error错误；此问题一般是通过setInterval，seTimeout，做Ajax轮询时会产生此问题；
此问题全网唯一! 关于MultiActionController异步请求Ajax,pc端正常,手机端报error问题:此问题一般是通过setInterval,seTimeout,做Ajax轮询时会产生 ...
python 优雅退出_Python学习教程：Python 使用 backoff 更优雅的实现轮询
我们经常在开发中会遇到这样一种场景,即轮循操作.今天介绍一个Python库,用于更方便的达到轮循的效果--backoff. Python学习教程:Python 使用 backoff 更优雅的实现轮询 ...
Android RxJava应用：优雅实现网络请求轮询(无条件)
前言 Rxjava,由于其基于事件流的链式调用.逻辑简洁 & 使用简单的特点,深受各大 Android开发者的欢迎. 今天,我将为大家带来 Rxjava创建操作符的常见开发应用场景:轮询需求 ...
首先实现立即执行轮询函数，然后setInterval再间隔执行轮询函数，实现方法
代码启动后,setInterval可以实现间隔指定时间轮询执行我们定义的函数,但是如果需要启动项目后,首先立即执行一次自定义函数,然后再轮询执行,怎么办?看下面,先手动执行一次函数,然后再setInt ...
语音播报——用setTimeout实现轮询调用接口并播报语音功能
应用场景:对于订单管理系统,如果有订单来了,希望能够及时提醒的话,语音播报是一个很好的方式功能: 勾选语音播报,则会间隔15s去调用接口,如果接口返回数据则进行音频的播报如果不勾选语音播报或者取消 ...

setTimeout 与 setInterval —— 实现优雅轮询

文章目录

1 定义与用法

1.1 setTimeout

1.1.1 定义

1.1.2 用法

1.1.3 技术细节

1.2 setInterval

1.2.1 定义

1.2.2 用法

1.2.3 技术细节

2 setInterval缺陷

2.1 无视代码错误

2.2 无视网络延迟

2.3 不保证间隔执行

3 优雅轮询

setTimeout 与 setInterval —— 实现优雅轮询相关推荐

最新文章

热门文章