zoukankan      html  css  js  c++  java
  • js 同步延时调用

    function LazyMan(name) {
      return new _lazyman(name)
    }
    function _lazyman(name) {
      this.task = []
      var that = this
      var fn = (function(name) {
        return function() {
          console.log("Hello I'm " + name)
          that.next()
        }
      })(name)
      this.task.push(fn)
      setTimeout(function() {
        that.next()
      }, 0)
      //此处用settimeout执行是因为settimeout会在同步线程都进行完了之后再执行,如果不用settimeout就会同步触发,事件还未都放在队列中,就已经开始执行了
      //关于js同步,异步,事件循环等,可以看这篇文章http://blog.csdn.net/alex8046/article/details/51914205
    }
    _lazyman.prototype = {
      constructor: _lazyman,
      //next是实现函数在队列中顺序执行功能的函数
      next: function() {
        var fn = this.task.shift()
        fn && fn()
      },
    
      sleep: function(time) {
        var that = this
        var fn = (function(time) {
          return function() {
            console.log('sleep.......' + time)
            setTimeout(function() {
              that.next()
            }, time)
          }
        })(time)
        this.task.push(fn)
        return this
        //return this是为了实现链式调用
      },
    
      sleepfirst: function(time) {
        var that = this
        var fn = (function(time) {
          return function() {
            console.log('sleep.......' + time)
            setTimeout(function() {
              that.next()
            }, time)
          }
        })(time)
        this.task.unshift(fn)
        return this
      },
    
      eat: function(something) {
        var that = this
        var fn = (function(something) {
          return function() {
            console.log('Eat ' + something)
            that.next()
          }
        })(something)
        this.task.push(fn)
        return this
      }
    }
    
    LazyMan('Joe')
      .sleepfirst(3000)
      .eat('breakfast')
      .sleep(1000)
      .eat('dinner')
    
    
    let LazyMan = name => new _lazyman(name);
    
    function _lazyman(name) {
      let t = this;
      this.tasks = [];
      let fn = () => {
        console.log("HI " + name);
        t.next();
      };
      this.tasks.push(fn);
      setTimeout(() => t.next(), 0);
    }
    _lazyman.prototype = {
      constructor: _lazyman,
      next() {
        let fn = this.tasks.shift();
        fn && fn();
      },
      sleepfirst(num) {
        let t = this;
        let fn = (num => () => {
          console.log("sleepfirst......." + num);
          setTimeout(() => {
            t.next();
          }, num);
        })(num);
        t.tasks.unshift(fn);
        return t;
      },
      eat(name) {
        let t = this;
        let fn = (() => () => {
          console.log("Eat..." + name);
          t.next();
        })();
        this.tasks.push(fn);
        return this;
      },
      sleep(num) {
        let t = this;
        let fn = (num => () => {
          console.log("sleep.." + num);
          setTimeout(() => {
            t.next();
          }, num);
        })(num);
        t.tasks.push(fn);
        return this;
      }
    };
    
    LazyMan("Joe")
      .sleepfirst(3000)
      .eat("breakfast")
      .sleep(1000)
      .eat("dinner");
    
    // sleep.......3000
    // Hello I'm Joe
    // Eat breakfast
    // sleep.......1000
    // Eat dinner
    
    
    let LazyMan = name => new _lazyman(name);
    class _lazyman {
      constructor(name) {
        this.tasks = [];
        let t = this;
        let fn = () => {
          console.log("HI " + name);
          t.next();
        };
        this.tasks.push(fn);
        setTimeout(() => t.next(), 0);
      }
      next() {
        let fn = this.tasks.shift();
        fn && fn();
      }
      sleepfirst(num) {
        let t = this;
        let fn = (num => () => {
          console.log("sleepfirst......." + num);
          setTimeout(() => {
            t.next();
          }, num);
        })(num);
        t.tasks.unshift(fn);
        return t;
      }
      eat(name) {
        let t = this;
        let fn = (() => () => {
          console.log("Eat..." + name);
          t.next();
        })();
        this.tasks.push(fn);
        return this;
      }
      sleep(num) {
        let t = this;
        let fn = (num => () => {
          console.log("sleep.." + num);
          setTimeout(() => {
            t.next();
          }, num);
        })(num);
        t.tasks.push(fn);
        return this;
      }
    }
    
    LazyMan("Joe")
      .sleepfirst(3000)
      .eat("breakfast")
      .sleep(1000)
      .eat("dinner");
    
    // sleep.......3000
    // Hello I'm Joe
    // Eat breakfast
    // sleep.......1000
    // Eat dinner
    
  • 相关阅读:
    GPS坐标转化距离(短距离模型公式)
    jquery ajax 同步异步的执行
    视频播放的基本原理
    [css或js控制图片自适应]
    asp.net中js和jquery调用ashx的不同方法分享,需要的朋友可以参考一下
    [转载]在网页中插入media,RealPlayer等控件
    数组的几种排序算法的实现(3)
    -- HTML标记大全参考手册[推荐]
    数组的几种排序算法的实现(2)
    数组的几种排序算法的实现(1)
  • 原文地址:https://www.cnblogs.com/smzd/p/12362530.html
Copyright © 2011-2022 走看看