浅谈settimeout和setinterval的区别

我们先来了解一下setTimeout定时器，他的特点就是只能用一次，也称为一次性定时器。

setTimeout()只执行一次，setInterval()可以执行多次。

setTimeout(要执行的代码，间隔时间，参数1，参数2);

一.setTimeout的多种用法：

1，直接将js代码写在字符串中：

setTimeout("alert(123)",500);

2，在字符串中调用函数：

setTimeout("callFun()",500);

function callFun(){
alert(456);
}

 3，使用匿名函数：

setTimeout(()=>{
	    		alert(456)
	           },500);
 
 
或者 
 
 
setTimeout(function(){
	    		alert(456)
	       },500);

如果调用函数时需要传递参数:

var obj = {name:"xxx"}
setTimeout(()=>{
	alert(obj.name)
},500,obj);
 
或者
 
setTimeout(function(){
	alert(obj.name)
},500,obj);

假设这是vue的methods, aaa 内部用setTimeout调用 bbb ,并给bbb传递参数

methods：{
     aaa(){
           let that = this;
           var obj = {name:"xxx"}
           setTimeout(()=>{
               obj.name = "yyyyyyy";
	           that.bbb(obj)
           },500,obj);
 
    },
 
    bbb(obj){
        alert(obj.name);
    }
 
}

 接着看看 setInterval定时器，他的特点就是可以重复执行给定的函数

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 

setInterval(function, milliseconds, param1, param2, ...)

setInterval(
      (name, gender) => {
        console.log(name + ' is ' + gender)
      },
      1000,
      'Tom',
      'boy'
    )

1、调用一个已命名函数：

var myVar;
 
function myFunction() {
    myVar = setInterval(alertFunc, 3000);
}
 
function alertFunc() {
    alert("Hello!");
}

 例如规定每隔两百毫秒打印一次 hello

 

setInterval(() => {
    console.log('hello')    
}, 200)