定时调用和延时调用

160 阅读1分钟

setInterval()

  • 定义:定时调用可以将一个函数,每隔一段时间执行一次
  • 参数
  1. 回调函数,该函数会每隔一段时间被调用一次
  2. 每次调用间隔的时间,单位是毫秒
  • 返回值:返回一个Number类型的数据,这个数字用来作为定时器的唯一标识
var num = 1;
info = document.getElementById("info");
setInterval(function(){
    info.innerHTML = num++;
}, 1000);

clearInterval()

  • 作用:可以用来关闭一个定时器,方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
var timer = setInterval(function(){
    info.innerHTML = num++;
    if(num > 100){
        clearInterval(timer);
    }
}, 10);
  • 注意点:多次点击开始按钮导致切换速度过快问题

目前,我们每点击一次按钮,就会开启一个定时器,点击多次就会开启多个定时器这就导致图片的切换速度过快,并且我们只能关闭最后一次开启的定时器在开启定时器之前,需要将当前元素上的其他定时器关闭

setTimeout()、clearTimeout()

  • 定义:延时调用,延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次延时调用和定时调用的区别:定时调用会执行多次,而延时调用只会执行一次延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择
var num = 1;
var timer = setInterval(function(){
 	console.log(num++); // 1 2 3 4 5 ...
}, 1000);
var timer = setTimeout(function(){
    console.log(num++); // 1
}, 1000);
clearTimeout(timer);