原生js的setTimeout定时和clearTimeout清除定时器

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="button" value="开始" id="btn1"><input type="button" value="取消" id="btn2"><script>var btn1 = document.getElementById('btn1');var btn2 = document.getElementById('btn2');var timer; // 定时器的标识// setTimeout 定时炸弹 隔一段时间，只执行一次 // setInterval 闹钟 隔一段时间，重复执行// 点击开始按钮，执行setTimeoutbtn1.onclick = function () {// setTimeout 两个参数：要执行的函数，间隔时间（ms），返回值是一个整数，即定时器的标识// 1. 第一个参数为匿名函数// timer = setTimeout(function () { //     console.log('爆炸了');// }, 3000);// 2. 调用命名函数 // timer = setTimeout(fn(), 3000); 第一个参数不可以使用fn()，否则执行到这一行的时候，会调用fn函数得到其返回值，由于没有设置return，返回值为undefined，此时setTimeout的第一个参数就是undefinedtimer = setTimeout(fn, 3000); // 只写函数名称fnfunction fn() {console.log('爆炸了');}};// 点击取消按钮，阻止setTimeout的执行，取消定时器，获取setTimeout的返回值即定时器的标识btn2.onclick = function () {clearTimeout(timer);};</script></body>
</html>

原生js的setTimeout定时和clearTimeout清除定时器相关推荐

js vue中setTimeout无法通过clearTimeout清除问题
js vue中setTimeout无法通过clearTimeout清除问题在异步清除中,利用vue 中data存放setTimeout的标识进行清除时,无法清除.则需要在函数前加上window.即可 ...
html 取消settimeout,vue中setTimeout无法通过clearTimeout清除问题
在异步清除中,利用vue 中data存放setTimeout的标识进行清除时,无法清除.则需要在函数前加上window.即可如window.setTimeout与window.clearTimeou ...
原生js简单实现定时抢月饼
早上跟人聊起月饼来,突然就想起了去年阿里的抢月饼事件,顺手写下这个抢月饼脚本. window.onload = function () {//判断时间数字是否小于10并格式化function form ...
vue+element UI＋原生JS实现日期倒计时
直接来代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
js setInterval+setTimeout定时器轮询+终止轮询
常见的轮询方式: window.timer = setInterval(()=>{this.promiseFun()},1000) 大家一般都会使用setInterval,但要注意单纯使用它可能 ...
JavaScript定时器与清除定时器
setTimeout定时器 window.setTimeout(调用函数,延时时间); 1.这个window在调用的时候可以省略 2.这个延时时间单位是毫秒但是可以省略,如果省略默认的是0 3.这个 ...
原生js 弹出框;弹出效果定时关闭
关于原生js的弹出框样式淡出淡入效果; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
js定时器setTimeout和setInterval用法及区别，清除定时器的使用
setTimeout和setInterval使用方法定时器两个参数,第一个是执行代码,第二个是执行时间.执行时间自己随便设置,执行代码有以下几种方式传入: 1.匿名函数形式传入 setTimeout ...
java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)
原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...

原生js的setTimeout定时和clearTimeout清除定时器

原生js的setTimeout定时和clearTimeout清除定时器相关推荐

最新文章

热门文章