js定时器setTimeout、clearTimeout、setInterval使用和区别

setTimeout(调用函数，[延迟的毫秒数])；

用于设置一个定时器该定时器在定时器到期后执行调用函数

案例：3秒后显示log打印结果

    <script>//方法一// setTimeout(function() {//     console.log('到时间了');// }, 3000);//方法二 调用函数的方式function back() {console.log('niho');}setTimeout(back, 3000)</script>

如果一个页面有多个定时器为了区分可以给定时器设置一个变量名即可

    <script>//方法一// setTimeout(function() {//     console.log('到时间了');// }, 3000);//方法二 调用函数的方式function back() {console.log('niho');}var time1 = setTimeout(back, 3000)var time2 = setTimeout(back, 5000)</script>

clearTimeout() 停止定时器

括号里写的是定时器的名字

案例：点击按钮停止定时器不再执行此定时器

<body><button>停止定时器</button><script>var btn = document.querySelector('button')var timer = setTimeout(function() {console.log('我要爆炸了');}, 5000);btn.onclick = function() {clearTimeout(timer)}</script>
</body>

setInterval(调用函数，[延迟的毫秒数])

与setTimeout的区别是 这个是每间隔几秒就会执行一次函数会调用很多次 重复调用这个函数

   <script>setInterval(function() {console.log('重复调用');}, 3000);</script>

clearInterval() 清除定时器

这个是清除重复调用的定时器就是上面那个setInterval

案例：

注意：1、setInterval定时器是重复调用的所以是用addEventListener监听器

2、下面的变量timer不能直接在监听器里声明在函数内部声明是局部变量下面的关闭函数会获取不到这个变量显示timer会定义所以把timer定义为null 意思设置为一个空对象然后把定时器赋值给这个timer空对象

<body><button class="begin">开启定时器</button><button class="stop">关闭定时器</button><script>var begin = document.querySelector('.begin')var stop = document.querySelector('.stop')var timer = null; //null 意思存放的是一个空对象begin.addEventListener('click', function() {timer = setInterval(function() {console.log('开始了');}, 1000)})stop.addEventListener('click', function() {clearInterval(timer)})</script>
</body>

js定时器setTimeout、clearTimeout、setInterval使用和区别相关推荐

js定时器setTimeout和setInterval用法及区别，清除定时器的使用
setTimeout和setInterval使用方法定时器两个参数,第一个是执行代码,第二个是执行时间.执行时间自己随便设置,执行代码有以下几种方式传入: 1.匿名函数形式传入 setTimeout ...
JS定时器setTimeout和setInterval介绍
JS定时器setTimeout和setInterval介绍 JavaScript 定时器,有时也称为"计时器",用来在经过指定的时间后执行某些任务.avaScript 中提供了两种 ...
js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
setTimeout()在js类中的使用方法 setTimeout (表达式,延时时间) setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTi ...
JS 中settimeout和setinterval函数的区别
2019独角兽企业重金招聘Python工程师标准>>> 首先settimeout一定时间之后执行表达式或程序,并只执行一次:setinterval是每间隔一定时间后开始执行表达式或程 ...
JS中SetTimeOut和SetInterval方法的区别？
1.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 ...
定时器setTimeout和setInterval的简单应用
本文简单利用定时器setTimeout和setInterval举了两个小栗子:定时炸弹和1-100递增代码如下: <!DOCTYPE html> <html lang=" ...
js中的两种定时器setTimeout()和setInterval()怎么用
JS有两种定时器分别是setTimeout()和setInterval(),这两个区别就是setTimeout()是一次性的定时器,而setInterval()是循环的定时器. 定时器的精度 js中的 ...
js中的定时器 setTimeout()和setInterval() (保姆级教程)
1 两种定时器 window 对象给我们提供了 2 个非常好用的方法-定时器. setTimeout() setInterval() 2 setTimeout() 定时器 window.setTime ...
js中计时器setTimeout、setInterval、requestAnimationFrame区别
转载自:https://www.cnblogs.com/xiaohuochai/p/5777186.html 本文仅用于作为学习笔记计时器一直是javascript动画的核心技术.而编写动画循环的关 ...
前端开发：JS中setTimeout和setInterval的对比使用
前言在前端开发过程中,关于计时器的使用是非常常用的知识点,也是非常重要的,尤其是需要规定延迟多久之后再去执行某个操作.在JS的计时器使用中有setTimeout和setInterval,二者都是定时 ...

js定时器setTimeout、clearTimeout、setInterval使用和区别

js定时器setTimeout、clearTimeout、setInterval使用和区别相关推荐

最新文章

热门文章