• 异步回调的经典案例


    for (var i =0; i <5; i++){
    	setTimeout(function() {
    		console.log(i)
    	},i*i*1000)
    }
    var tag = 0
    setInterval(function() {
    	tag++
    	console.log('我是标记'+tag)
    },1000)
    

      执行结果:

    // 99758@zsh MINGW64 ~/Desktop
    // $ node test.js
    // 5 		0秒后打印
    // 5 		1秒后打印
    // 我是标记1 1秒后打印
    // 我是标记2 2秒后打印
    // 我是标记3 3秒后打印
    // 5 		4秒后打印
    // 我是标记4 4秒后打印
    // 我是标记5 5秒后打印
    // 我是标记6 6秒后打印
    // 我是标记7 7秒后打印
    // 我是标记8 8秒后打印
    // 5		9秒后打印
    // 我是标记9 9秒后打印
    // 我是标记10 10秒后打印
    // 我是标记11 11 秒后打印
    // 我是标记12 12 秒后打印
    // 我是标记13 13 秒后打印
    // 我是标记14 14 秒后打印
    // 我是标记15 15 秒后打印
    // 5	     16 秒后打印
    // 我是标记16 16 秒后打印
    // 我是标记17 17 秒后打印
    // 我是标记18 18 秒后打印
    // 手动停止。。。

    将上述代码改造下:

    for (let i =0; i <5; i++){
    	setTimeout(function() {
    		console.log(i)
    	},i*i*1000)
    }
    var tag = 0
    setInterval(function() {
    	tag++
    	console.log('我是标记'+tag)
    },1000)
    

      转换成js

    'use strict';
    
    var _loop = function _loop(i) {
    	setTimeout(function () {
    		console.log(i);
    	}, i * i * 1000);
    };
    
    for (var i = 0; i < 5; i++) {
    	_loop(i);
    }
    var tag = 0;
    setInterval(function () {
    	tag++;
    	console.log('我是标记' + tag);
    }, 1000);
    

      跑起来:

    // 执行结果:
    // 99758@zsh MINGW64 ~/Desktop
    // $ node test.js
    // 0 		0秒后打印
    // 1 		1秒后打印
    // 我是标记1 1秒后打印
    // 我是标记2 2秒后打印
    // 我是标记3 3秒后打印
    // 2 		4秒后打印
    // 我是标记4 4秒后打印
    // 我是标记5 5秒后打印
    // 我是标记6 6秒后打印
    // 我是标记7 7秒后打印
    // 我是标记8 8秒后打印
    // 3		9秒后打印
    // 我是标记9 9秒后打印
    // 我是标记10 10秒后打印
    // 我是标记11 11 秒后打印
    // 我是标记12 12 秒后打印
    // 我是标记13 13 秒后打印
    // 我是标记14 14 秒后打印
    // 我是标记15 15 秒后打印
    // 4	     16 秒后打印
    // 我是标记16 16 秒后打印
    // 我是标记17 17 秒后打印
    // 我是标记18 18 秒后打印
    // 手动停止。。。
    

      

  • 相关阅读:
    两个链表的第一个公共结点
    数组中的逆序对
    C++强制类型转换运算符(static_cast、reinterpret_cast、const_cast和dynamic_cast)
    第一个只出现一次的字符
    机器学习算法速览表
    丑数
    设计模式---行为型设计模式【策略模式】
    设计模式---行为型设计模式【备忘录模式】
    设计模式----创建型设计模式【单例模式】
    设计模式----创建型设计模式【简单工厂、工厂方法、抽象工厂】
  • 原文地址:https://www.cnblogs.com/zhouxiaohouer/p/7905186.html
Copyright © 2020-2023  润新知