如何用原生js完成一个时间上随机并且固定执行一系列相同任务的功能？

Question

1.完成如下功能

每隔5分钟到10分钟中间的一个时间点（时间随机），即每次间隔的时间都不一样，执行几个动作的循环，动作与动作之间可以任意设置等待时间

执行的动作不会变，也就是大概这样

//执行动作一
function a(){

}

//等待十秒
//执行动作二
function b(){

}

//等待二十秒
//执行动作三
function b(){

}

Answer 1

(function go(){
    setTimeout(function(){
        setTimeout(function(){
                child1();
            setTimeout(function(){
                child2();
                setTimeout(function(){
                    child3();
                    go()
                },20秒)
            },30秒),
        },10秒),
    },5分钟)
})()

应该用 promise 来改写。。。。

从新改写了一下，如下：

var list = [{ // 按顺序循环执行的函数列表
    fn: function() {
        console.log(1)
    },
    time: 1000
}, {
    fn: function() {
        console.log(2)
    },
    time: 1000
}, {
    fn: function() {
        console.log(3)
    },
    time: 1000
}];

(function start(list) {
    var wrapList = list.map(function(item, index) {
        return function() {
            setTimeout(function() {
                item.fn();
                if (index + 1 < wrapList.length) {
                    wrapList[index + 1]();
                } else {
                    go()
                }
            }, item.time)
        }
    })

    function go() {
        setTimeout(function() {
            wrapList[0]();
        }, 1000) // 整体循环的间隔时间
    }
    go();

})(list)

再更新一个写法：

 let steps = [{
         time: 10,
         function: function() {
            console.log(1)//函数体
         }
     },{
         time: 20,
         function: function() {
            console.log(2)//函数体
         }
     },{
         time: 30,
         function: function() {
            console.log(3)//函数体
         }
     }

 ];

 function* iterateSteps(steps) {
     for (var i = 0; i < steps.length; i++) {
         var step = steps[i];
         yield step;
     }
 }

 var execute = iterateSteps(steps);
 var value = execute.next().value;

 (function loop() {
     setTimeout(function() {

         value.function();
         value = execute.next().value;
         if (value) {
             loop();
         } else {
            setTimeout(function(){
                execute = iterateSteps(steps);
                value = execute.next().value;
                loop();               
            }, rnd(5,10)*3600)


         }
     }, value.time)
 })()


 //随机数
function rnd(n,m)//[n,m]
{
return parseInt(Math.random()*(m-n+1)+n);
};

//上promise 的写法。。（某vue群网友帮忙）

var list = [{ // 按顺序循环执行的函数列表
  fn: function() {
    console.log(1)
  },
  time: 1000
}, {
  fn: function() {
    console.log(2)
  },
  time: 1000
}, {
  fn: function() {
    console.log(3)
  },
  time: 2000
}, {
  fn: function() {
    console.log(4)
  },
  time: 3000
}];

var i = 0, length = list.length;
var promise = new Promise(function (resolve, reject) {
  try {
    setTimeout(function () {
      list[0].fn();
      resolve(0)
    }, list[0].time)
  } catch (e) {
    reject(e);
  }
})
function gen() {
  promise.then(function (value) {
    if (i < length - 1) {
      i++;
      promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
          list[i].fn();
          resolve(value);
          gen();
        }, list[i].time)
      })
    }
  })
}
gen();

// 网友帮忙。 async await 写法。【简洁。。直观。】

function generatePromise(item) {
  return new Promise(function (reslove,reject) {
    setTimeout(function () {
      reslove(item.fn());
    },item.time)
  })
}

async function asyncList() {
  for (var i = 0;i< list.length;i++) {
    await generatePromise(list[i]);
  }
}

asyncList();

Answer 2

便于维护的话，async/await没跑了