setTimeout代替setInterval的写法以及setInterval的弊端以及越来越快的解决办法

平常经常遇到的一个问题,很多人想间隔时间执行一些事件的时候,第一时间就会想到用setInterval,但是setInterval村子啊不少弊端哦。

弊端1:setInterval会无视错误代码,即使代码报错,还是会一直执行下去。

弊端2:setInterval会无视网络延迟,很多人会有需求需要1秒更新一次数据,然后就有可能会定时发送请求给服务器请求,假如服务器请求数据发生延迟等等情况的时候,setInterval不会等到请求数据完之后才去去执行下一次请求,他会在当你发生第一次请求的时候就已经开始计时,并且无论有没有请求完成,只有时间一到下一秒的时候,就会再次发送请求。很容造成请求堵塞,或者渲染堵塞,严重的会之间卡死。

弊端3:很多时候越跑越快的问题。

解决方案:使用setTimeout和递归(自我调用)

例如:

使用 setInterval 方案(不推荐使用)

setInterval(function(){
    console.log(‘做点什么吧‘)
},1000)

使用 setTimeout 方案 (推荐使用,完美代替setInterval)

var demo = function(){
     console.log(‘做点什么吧‘)
     setTimeout(demo, 1000)
}

原文地址:https://www.cnblogs.com/it-xiong/p/10044786.html

时间: 2024-08-30 16:43:32

setTimeout代替setInterval的写法以及setInterval的弊端以及越来越快的解决办法的相关文章

函数内部用setTimeout()调用自身函数相当于setInterval()

本来setTimeout(function(){},time)只执行了一次function,但是当 function demo() { alert(1); setTimeout('demo()' ,500);} 此时每隔0.5秒就会alert,但是我就觉得奇怪,因为setTimeout()本来就是只执行一次而已,为什么会一直不断的出现呢?感觉好像setInterval(): 后来才发现原来他是调用了自身的函数,所以是一直嵌套自身函数,才会这样一直循环. 如果改成这样, function demo

SetTimeout()多次运行函数后越来越快的问题

问题原因很简单,但是由于代码逻辑问题,一直没有考虑到: 网上有个帖子说的很明白:原帖入口 假如你在0时刻点击了一下按钮,那么500ms时数字会跳一下,1000ms会再跳一下,依次类推,1500,2000,2500.....的时候都会跳一下,时间间隔始终是500ms,但是,假如你在300ms的时候又点击了一下按钮,那么800ms的时候数字就会跳一下,1300,1800,2300.....的时侯都会跳一下,那么现在看0到2000ms之间,300,500,800,1000,1300,1500,1800

JS学习之路,菜鸟总结的注意事项及错误更正

JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持类,类这一概念在 JavaScript 通过对象原型 (object prototype)得到延续(有关 ES6 类的内容参考这里Classes).另一个主要区别是 JavaScript 中的 函数也是对象,JavaScript 允许函数在包含可执行代码的同时,能像其他对象一样被传递.1,scrip

JS学习之注意事项及错误更正

JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样 适用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持类,类这一概念在 JavaScript 通过对象 原型(object prototype)得到延续(有关 ES6 类的内容参考这里Classes).另一个主要区别是 JavaScript 中的函数也是对象,JavaScript 允许函数在包含可执行代码的同时,能像其他对象一样被传递.1,script

CSS水平和垂直居中的几种实现方法

一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题.可是这个方法有时候完全不起作用,而且对于布局是非常不科学的方法.正确的的设置写法如下(对页面构造没有影响):div {margin-left: auto; margin-right: auto; }这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果.有时候我们还可以简写为 div { marg

CSS切换动画Transition应用到新创建dom不起作用

transition在新创建的dom上,无法立即生效,因为css会被合并计算,所以要看到动画效果,必须将切换css代码放入到setTimeout函数内,异步运行才可以. 示例代码:调用两个函数,分别创建顶部滑入.底部滑入动画,第一个不使用setTimeout.第二个使用setTimeout函数,可以明显看出差别. html代码: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8&

CSS水平居中和垂直居中解决方案

一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题.可是这个方法有时候完全不起作用,而且对于布局是非常不科学的方法.正确的的设置写法如下(对页面构造没有影响):div {margin-left: auto; margin-right: auto; }这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果.有时候我们还可以简写为 div { marg

switch case is in protected scope解决办法

出现错误:switch case is in protected scope 一半情况下这种写法: switch (XXX) { case XXX: XXXX break; default: break; } 解决办法: switch (XXX) { case XXX: { XXXX } break; default: break; } 每个case后加上一个大括号

window对象方法之setTimeout(),setInterval()

window中的这两个方法是比较重要的,在许多的设计中会使用到这两个方法.比如使用在倒计时抢购中. 首先来说说这两个方法的用法吧! 一:window.setTimeout(); setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. //延迟几秒以后执行代码,并且只执行 一次 语法: setTimeout(code,millisec); 例子:两秒后,弹出“hello js”: 1 第一个参数 我们要执行的代码 或则 一个函数 2 第二个参数 毫秒数第一种写法 (直接写 js