我会继续给大家更新JavaScript,一周差不多两篇,但是都会很详细,每一篇也是一个知识点的写,希望大家喜欢哦~,要什么建议点下方评论区哦~(* ̄︶ ̄)
一.JavaScript 定时器
一. 关键字
- 设置定时器:setTimeout ,setInterval
- 停止定时器:clearTimeout , clearInterval
1.1 setTimeout()定时器
window.setTimeout(调用函数 【延迟的毫秒数】);
//该定时器在时间到后执行调用函数
注意:
- window 可以省略
- 调用函数可直接写函数,或者写函数名或者采取字符串'函数名()' 三种形式
- 如果延迟的毫秒数为空,则默认为 0 ,如果写必须是毫秒 1000毫秒 为 1 秒
- 为了区分,可给定时器赋值一个标识符
1.2 clearTimeout()停止定时器
window去.clearTimeout (timeoutID)
//取消了先前通过调用 setTimeout() 建立的定时器
注意:
- window 可以省略
里面的参数就是定时器的标识符
<script>
setTimeout(function(){
console.log("时间到了")
},1000);
//下面这个写法不提倡
function callback(){
console.log("今天你真棒!”)
}
var timer1=setTimeout(callback,2000);
</script>
1.3 setInterval()定时器
window.setInterval(回调函数,[,间隔毫秒数]);
//重复调用一个函数,每间隔这个时间,就会调用此函数
注意:
- window可以省略
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()’三种形式
- .间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符
- 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次
1.4 clearInterval()定时器
window.clearInterval(interval ID)
//取消了先前建立的定时器
注意:
- window可以省略
- 里面的参数就是定时器标识符
案例:发送短信验证按钮60秒等待结果
<body>
手机号码: <input type="number"> <button>发送</button>
<script>
// 按钮点击之后,会禁用 disabled 为true
// 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
// 里面秒数是有变化的,因此需要用到定时器
// 定义一个变量,在定时器里面,不断递减
// 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态
var btn = document.querySelector('button');
var time = 3; // 定义剩下的秒数
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);
})
</script>
</body>
定时器就到此结束啦!后面可能会在JavaScript中插入一,两篇jQuery的文章哦~