初识异步

作者: 学的会的前端 | 来源:发表于2019-02-25 22:44 被阅读0次

055 Python语法之异步IO-Async
初识异步
Javascript 异步编程（一）初识异步
实战：异步爬取之初识异步
初识同步、并行与异步
JavaScript异步编程：（二）Promise初识
《Promise》
Nuxt.js教程（入门篇）
gulp初识 - 导出任务+异步类型
Nginx配置和使用

异步：

异步：自己不等结果，利用回调函数通知我结果。一般情况下，异步和回调是同时出现的。
同步：自己在等结果
代码展示：

function 排队取号(黄牛){
        setTimeout(function(){
            黄牛('你的号码是 233')//因为黄牛是一个函数，所以为黄牛，传递参数
        },3000)
    }
    
    function 黄牛(result){
        console.log(result)
    }

    //var result = 排队取号()//排队取号函数没有return,
    //默认返回值undefined
    排队取号(黄牛)

具体理解

    function 排队取号(通知我){
        var id = setTimeout(function f2(){
            console.log('通知我(2333)')        
        },3000)
        return id
    }
    //上面和下面分开看
    var 我的号 = undefined
    function 通知我(result){
        我的号 = result
    }
    排队取号(通知我)
    
        
    //排队取号不能直接马上拿到号码，要等3秒
    //只能返回排在第几位
    //我的号 = 排队取号（）这个代码不能拿到号码，即用同步的方式拿不到号码
    //派一个人过去拿号码
    //回调是一个套路，不是一个语法
    //通知我这个函数就是一个回调函数，因为调用他的目的是给我通知消息，我传给你，你在调回来
    //通知我()普通函数
    //排队取号(通知我)，此时通知我就是回调函数

面试题：

面试题1：

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

面试题2：

    for(var i = 0; i < 5; i++){
        setTimeout(function(){
            console.log(i) // 5
        },1000*i) // 0s-5,1s-5,2s-5,3s-5,4s-5
    } 
//for循环结束后才执行闹钟setTimeout，此时i早就已经变成5了。

面试题3：

    for(var i = 0; i < 5; i++){
        (function(i){ //此时的i是一个新的变量声明
            setTimeout(function(){
                                 //打印出来的是function(i)中的i
                console.log(i) //每隔一秒打出一个，一共打出0,1,2,3,4
            },i*1000) //0s,1s,2s,3s,4s
        })(i)//这个i的值赋值给了function(i)
    }

面试题4：

    for(var i = 0; i < 5; i++){
        (function(){
            setTimeout(function(){
                console.log(i) //5,5,5,5,5
            },i*1000) //0s,1s,2s,3s,4s
        })(i)
    }

面试题5：

    for(var i = 0; i < 5; i++){
        setTimeout(function(i){
            console.log(i) //同时打出0,1,2,3,4
        }(i),i*1000);
    }
//代码改写
    for(var i = 0;i < 5; i++){
        var t1 = function(i){
            console.log(i) 
        }
        var t2 = t1(i) //undefined,t1的返回值是undefined，因为t1没有返回值
        var t3 = i*1000 // 0s,1s,2s,3s,4s
        setTimeout(t2,t3) //undefined
    }

倒计时器代码：

<body>
    <select id = 'mySelect' placeholder = "选择一个时间">
        <option value = "1" selected>1分钟</option>
        <option value = "5">5分钟</option>
        <option value = "10">10分钟</option>
        <option value = "20">20分钟</option>
        </option>
    </select>
    <button id = "startButton">start</button>
    <button id = "pauseButton" disabled>pause</button>
    <button id = "resumeButton" disabled>resume</button>
    <div id="output">
        
    </div>
    <script>
    var timeLeft = 10
    let lastTimerId 
    function showTime(){
        outputDiv.textContext = timeLeft + '秒'
        if(timeLeft === 0){
            return
        }
        timeLeft -= 1
        lastTimerId = setTimeout(showTime,1000)
    }
    startButton.onclick = function(){
        var vaolueNumber = parseInt(mySelect.value,10)
        var seconds = valueNumber * 60
        timeLeft = seconds
        if(lastTimerId){
            window.clearTimeout(lastTimerId)
        }
        showTime()
    }
    pauseButton.onclick = function(){
        if(lastTimerId){
            window.clearTimeout(lastTimerId)
            resumeButton.disabled = false
            pauseButton.disabled = true
        }
    }
    resumeButton.onclick = function(){
        showTime()
        pauseButton.disabled = false
        resumeButton.disabled = true
    }   
    </script>
</body>