【超详细~】js的三大定时器：setTimeout、setInterval、requestAnimationFrame

setTimeout（表达式，时间） => 是指延迟指定时间后才调用函数，调用次数仅一次；

setInterval（表达式，时间） => 是指每隔指定的时间就指定表达式，次数不为一，好比设置时间为四秒，每隔四秒就执行眨眼这个操作，循环操作下去；

停止定时：

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

setTimeout

function f(){
    
    
    var out=setTimeout(function(){
    
    
        t.value=i++;
        f();//方法中对自身调用
    },1000);
    if(i>10){
    
    //如果超过10次，则清除 执行，并提示信息
        clearTimeout(out);
        alert("10秒钟已到");
    }
}

setInterval

setInterval(function(){
    
    
  // parseInt解析一个字符串，返回一个整数
  if(parseInt(myDiv.style.width) < 500){
    
    
    myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
    // 总长500，除以5的数字正好是百分比
    myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
  }else{
    
    
    clearInterval(timer);
  }
},16);

requestAnimationFrame

requestAnimationFrame(function fn(){
    
    
  if(parseInt(myDiv.style.width) < 500) {
    
    
    myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
    myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
    // requestAnimationFrame只传入一个参数
    timer = requestAnimationFrame(fn);
  } else {
    
    
    cancelAnimationFrame(timer);
  }
})