JS中一种实现sleep函数的方案

困扰了我很久的问题，在此留个记录

①原生js

②setInterval和setTimeout

③近似递归的处理方法

因为js是单线程，所以计时器也是有顺序的

//问题描述：我想实现一个网页的图片左右滑动效果（不是切换），
//要求：每次滑动一张图片，然后停止1s，再滑动……停止……
//解决思路：给图片滑动写一个方法，执行一次移动一小点距离，n次后移动完整张图片，使用setInterval函数去执行这个n次循环的操作；然后使用setTimeout函数去完成1s的等待。
//大概思想代码描述如下：
假设每一张图片宽度值为100
var n = 20;//次数统计
function animation(){
n--;
left = left-5;
if(n == 0){
n = 20;
//满足条件就停止播放动画的计时器，从而达到‘阻塞’的效果
window.clearInterval(timer);
//设置超时计时器，延时1s执行
window.setTimeout(function(){
//清除运行中的计时器（没有则不管）
window.clearInterval(timer);
//设置动画的运行的计时器（此时超时计时器已经没有了）
window.setInterval(animation,20);
},1000);
}
}
var timer = window.setInterval(animation,20);
//效果就是每20ms执行一次图片操作，执行20次之后就等待1000ms，不会因为js暂停之类的系统优化策略导致滑动位置错误
//延时操作是为了开启动画计时器

还有一种死循环写法（参考自网络）

思路是利用系统时间，一旦没有运行到自己设定的时间就让程序一直在循环里计算（个人感觉实现简单，实际运行可能有点恐怖）

function sleep(numberMillis) {
//记录当前时间
var now = new Date();
//设置未来的某个时间
var exitTime = now.getTime() + numberMillis;
while (true) {
//获取当前时间
now = new Date();
//检查是否到了设置好的未来时间
if (now.getTime() > exitTime)
return;
}
}