JS定时器 setTimeout 异步

异步 参考文章

• 函数调用和函数的区别

// 函数和函数调用的区别

function fn () { //函数
    return 1;
}

fn(); //函数调用
console.log(fn); // ƒ fn() {return 1;}
console.log(fn()); //1

// 函数返回函数的时候调用当前函数即为return的那个函数
function fn2 () {
    return function () {
        return 2;
    }
}
fn2//是一个函数
fn2()//也是一个函数 function () { return 2; }
fn2()(); //2

定时器

• 先看一个例子

function fn (){
    console.log(1);
}
setTimeout(fn);
console.log(2);
//上述代码输出 2 1，先输出2后输出1

setTimeout设定了一个输出1的事件在0秒后执行，那么浏览器会先将目前的代码都执行完成后再回头执行setTimeout中的代码

function fn (){
    console.log(1);
}
var timeId = setTimeout(fn);
console.log('id:' + timeId);//1
console.log(2);
timeId = setTimeout(fn);
console.log('id:' + timeId);//2

//每次要执行setTimeout的函数的时候，就要销毁这个setTimeout，然后下次在定义个相同的setTimeout的时候，id是不一样的。

• 间隔永远要比要比设置的久

function fn (){
    console.log(1);
    console.log(new Date()-0);
}
setTimeout(fn);
console.log(new Date()-0);
// 设置了时间延时为0，但是输出的date还是有几十毫秒的差别，这是因为浏览器就算是延时为0，也要先将当前页面执行完，等‘闲下来’的时候再来执行setTimeout
// 所以这样造成的结果是，间隔永远要比要比设置的久

• 定时器的‘怠惰’问题
  当浏览器失去焦点的时候，即用户不在关注浏览器的时候，定时器的输出会变慢，比如设置0.5秒执行一次，有可能最小化浏览器之后1秒才执行一次这么做是为了节省内存。

• 关于setInterval
  setInteval只有一个timerId,和setTimeout不同

• setTimeout的函数的传参

    setTimeout(fn,500,1,2,3);
    function fn () {
        console.log(arguments); //[1,2,3]
    }

• 怎么取消定时器 window.clearTimeout(timerId)

    var timerId = setTimeout('console.log("设置了clearTimeout,这条会被阻止执行")',3000);
    window.clearTimeout(timerId); //阻止前面的setTimeout执行
    var timerId2 = setTimeout('console.log("没设置clearTimeout,这条会被执行")',3000);

异步 和 回调

看下面两个例子，异步就是不等结果，去执行别的代码，让一个回调函数来通知我结果

    function queue () {
        setTimeout(function () {
            return "您的号码是233";
        },60000); //60s之后才能拿到结果
    };

    var result = queue();
    console.log(result); //undefined 因为queue这个函数没有写return，所以默认返回undefined  拿不到想要的匿名函数的返回值

这时候想要拿到匿名函数的返回值,可以创建一个对象或者函数,传入queue中，queue中的匿名函数不用设置return，因为设置了也拿不到 然后不设置return，直接让这个创建的代理函数获取到值，就可以输出.

    function queue (agent) {　 //传入agent给形参
        setTimeout(function () {
            agent("您的号码是233"); // 匿名函数里不写return，写了也拿不到，直接用agent函数获取这个值
        },3000); //60s之后才能拿到结果
    };

//    这时候想要拿到匿名函数的返回值,可以创建一个对象或者函数,传入queue中，queue中的匿名函数不用设置return，因为设置了也拿不到
//    然后不设置return，直接让这个创建的代理函数获取到值，就可以输出
    function agent (result) { //创建一个函数
        console.log(result);
    }
    queue(agent); //将创建的函数传入queue

整体思路是，程序还要接着执行下面的，创建一个代理函数去得到值，等setTimeout的时间间隔到了之后拿到值之后返回给程序。

在上述例子中，agent函数就是一个回调函数。由全局传递给queue，然后queue调用之后又传回给全局。叫做回调函数。 “我传给你，你调用再传回给我”

异步和回调往往是同时出现的。因为异步了之后不回调，就相当于不要这个返回结果了。

相关的一些问题分析

for (var i = 0; i < 5; i ++) {
    console.log(i); //0 1 2 3 4
}

for (var i = 0; i < 5; i ++) {
    setTimeout(function () {  //for循环线结束，才运行setTimeout  这时候i的值都是5
        console.log(i);
    },1000*i);
}

第一次马上输出5 第二次是1000毫秒之后输出5 第三次是2000毫秒之后输出5 以此类推到第五次,j即每一秒打印一个
setTimeout内部匿名函数要输出i时，找不到i，要到上一级也就是全局中找i，这时候i已经为5了，而外部的时间间隔i跟全局的i是同一个东西，每次的值为0,1,2,3,4

for (var i = 0; i < 5; i ++) {
    (function () {
        setTimeout(function () {
            console.log(i);
        },i * 1000);
    })(i);
}

和第二题的结果一样，1000乘i的那个i是是全局中的i，每次为0,1,2,3,4

而setTimeout里面的函数的作用域中要输出的i不存在，要到上一级中作用域即立即执行函数中找i，立即执行函数中也没有i，再到全局作用域中找i，这时候for循环已经结束了，i为5，所以每次输出5,

for (var i = 0; i < 5; i ++) {
    (function (i) {
        setTimeout(function () {
            console.log(i);
        },i * 1000);
    })(i);
}

和第3题不同，这里立即执行函数写了一个形参，这个形参相当于一个变量声明var i = arguments[0];

那么setTimeout里面的函数在输出i时，找不到i，到上一级作用域即立即执行函数中去找，和第3题不同的是这次立即执行函数里面有i了，不会再到全局作用域里找i了。

写了形参就相当于定义了i，所以这时候输出的i是立即执行函数中的i，这个i传入的值就是当时的全局中i的值0,1,2,3,4

for (var i = 0; i < 5; i ++) {
    setTimeout((function (i) {
        console.log(i);
    })(i),i * 1000)
}

第5题仍然通过作用域链进行理解，setTimeout里面的函数的作用域中要输出的i，就是立即执行函数中的i，因为定义了形参，这个形参每次接收的i是当时全局中的i的值为0,1,2,3,4. 而时间间隔的i就是全局中的i，每次的值为0,1,2,3,4。
求得结果之后，针对第5题，我们可以简化一下代码，仔细分析一下

    for (var i = 0; i < 5; i ++) {
        var t1 = function (i) {
            console.log(i);
        };
        var t2 = t1(i);
        setTimeout(t2,1000*i);
    }

那么把代码拆开之后我们再来分析，此时setTimeout里面执行的是t2，t2是t1调用的结果，t1里面没有写return，那么默认返回undefined，所以t2为undefined，此时其实就相当于：

    setTimeout(undefined,0);
    setTimeout(undefined,1000);
    setTimeout(undefined,2000);
    setTimeout(undefined,3000);
    setTimeout(undefined,4000);

而输出的值是t1中的console.log(i);我们也可以很清晰的看到，这个i就是传入的当时的每次的i值0,1,2,3,4

setTimeout的应用：做个倒计时器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>


<select placeholder="选择一个时间" name="" id="mySelect">
    <option value="1" selected>1分钟</option>
    <option value="5">5分钟</option>
    <option value="10">10分钟</option>
    <option value="20">20分钟</option>
</select>
<button id="start">开始计时</button>
<button id="pause" disabled>暂停计时</button>
<button id="resume" disabled>恢复计时</button>

<div id="show"></div>


<script>

    var show = document.querySelector('#show');
    var start = document.querySelector('#start');
    var pause = document.querySelector('#pause');
    var resume = document.querySelector('#resume');
    var select = document.querySelector('#mySelect');


//    var timeLeft;
//    function showtime () {
//        show.innerText = timeLeft + '秒';
//        timeLeft -= 1;
//        if (timeLeft === 0) {
//            return;
//        }
//        setTimeout(showtime,1000);
//    }
//    start.addEventListener('click',function () {
//        var seconds = 60 * parseInt(select.value);
//        timeLeft = seconds;
//        showtime();
//    });
// 上面的代码能实现效果但是存在bug，连续点击start倒计时会越来越快，有多个setTimeout在控制计时
// 所以要解决这个问题，在再一次点击start的时候，要将上一次的setTimeout清除掉,怎么得到上一次的setTimeout呢，可以通过设置timerId

    var timeLeft;
    var lastTimerId; // 全局中定义个lastTinmerId
    function showtime () {
        show.innerText = timeLeft + '秒';
        timeLeft -= 1;
        if (timeLeft === 0) {
            return;
        }
        lastTimerId = setTimeout(showtime,1000); //执行seTimeout时顺便给timerId赋值
    }
    start.addEventListener('click',function () {
        var seconds = 60 * parseInt(select.value);
        timeLeft = seconds;
//        执行函数前先清除上一次的setTimeout
        if (lastTimerId !== undefined) {
            window.clearTimeout(lastTimerId);
        }
        showtime();
        pause.disabled = false; //点了start才能点击pause
    });

//    接下来设置暂停和恢复
//    暂停的思路很简单,恢复的思路就是不要重新赋值timeLeft,保持暂停的时候的timeLeft就可以
    pause.addEventListener('click',function () {
        if (lastTimerId) {
            window.clearTimeout(lastTimerId);
        }
        resume.disabled = false; //点了pause才能点resume
        pause.disabled = true; //点了pause之后不能再点击pause
    })
    resume.addEventListener('click',function () {
        showtime(); //就一行代码， showTime()就是把当前的timeLeft打出来，并没有给timeLeft重新赋值
        pause.disabled = false; //点了resume之后就可以点pause
        resume.disabled = true; //点了resume之后，不可以继续点击resume
    })
</script>
</body>
</html>