JS 计时器

一、setInterval() 循环计时器 延迟多长时间去反复执行

1. 设定计时器

setInterval(function () {
console.log(1);
}, 1000);

function showlog(){
console.log(1);
}
setInterval("showlog()",1000);    //一般写在函数外部，时间单位为毫秒

2. 清除计时器

var count = 0;
var timer = setInterval(function () {
count++;
console.log(count);
if (count >= 10) {    
clearInterval(timer);  //关闭计时器
}
}, 1000);

二、setTimeout 一次性计时器

var timer=setTimeout(function (){
console.log(1);
},1000);        //  时间单位为毫秒，一般写在函数内部

1. 拓展

    for(var i=0;i<10;i++)
     {
     setTimeout(function (){
     console.log(i);                             //输出结果是10个10
     },0);               
     }                        

JS是单线程，先执行for循环，完了再执行计时器，输出结果是10个10.

    for(let i=0;i<10;i++)
     {
     setTimeout(function (){
     console.log(i);                             //输出结果是0-9
     },0);
     }                        

let声明局部变量
2. setTimeout 改装成循环计时器（利用函数的递归）

var count = 0;
var timer=null;
showtime();
function showtime() {
     count++;
     console.log(count);
     if(count>=10)
     {
     clearTimeout(timer);                           //清除计时器
     return;
     }
     timer=setTimeout("showtime()", 1000);
}

三、 requestAnimationFrame

区别： requestAnimationFrame在浏览器放小或者切换选项卡的时候会暂停，setTimeout 和setInterval不会暂停

    loop();
     function loop()
     {
     console.log(1);
     //根据电脑屏幕的fps   16ms 刷新一次  1000/60
     window.requestAnimationFrame(loop);
     }
    // 兼容
    var windowrequestAnimationFrame = function (callback) {
     return requestAnimationFrame(callback) || mozRequestAnimationFrame(callback) ||    webkitRequestAnimationFrame(callback)
     || msRequestAnimationFrame(callback) || function (callback) {
     setTimeout(function () {
     callback();
     }, 1000 / 16)
     }
     }
     var windowcancelAnimationFrame = function (time) {
     return cancelAnimationFrame(time) || clearTimeout(time);
     }
     var timer = null;
     var count = 0;
     loop();
     function loop() {
     count++;
     console.log(count);
     if (count >= 10) {
     //cancelRequestAnimationFrame  这个代码不认  会报错   认cancelAnimationFrame
     windowcancelAnimationFrame(timer);
     return;
     }
     timer = windowrequestAnimationFrame(loop);
     }

四、其他

loction 显示当前页面的地址的相关信息
location.href=“https://www.baidu.com”;
history 当前网页的历史记录
window.history.forward();
window.history.back();*/

来源：CSDN

作者：jingerh126

链接：https://blog.csdn.net/jingerh126/article/details/103541161