JavaScript学习笔记整理_setTimeout的应用
setTimeou的t应用
varids=[];
functionfoo1(i){
this.i=i;
console.log('i='+i);
ids[0]=setTimeout((function(){
foo1(i);
}),1000);
}
functionfoo2(j){
this.j=j;
console.log('j='+j);
ids[1]=setTimeout((function(){
foo2(j);
}),1000);
}
foo1(2);
foo2(3);
clearTimeout(ids[0]);
clearTimeout(ids[1]);
当setTimeout(f,n)被调用时，它会返回一个ID标识并且计划在将来大约n毫秒后调用f函数。f函数只会被执行一次（递归执行的话就可以实现每n毫秒执行一次），基于JavaScript引擎的计时策略，以及本质上的单线程运行方式，所以其它代码的运行可能会阻塞此线程。因此没法确保函数会在setTimeout指定的时刻被调用。通过在回调函数内部使用setTimeout函数来防止阻塞！
JavaScript是异步的，setTimeout只会执行回调函数一次，不过setInterval会每隔X毫秒执行函数一次。但是却不鼓励使用这个函数。当回调函数的执行被阻塞时，setInterval仍然会发布更多的回调指令。在很小的定时间隔情况下，这会导致回调函数被堆积起来。
setTimeout和setInterval也接受第一个参数为字符串的情况。这个特性绝对不要使用，因为它在内部使用了隐藏的eval，由于eval在这种情况下不是被直接调用，因此传递到setTimeout的字符串会自全局作用域中执行，建议不要在调用定时器函数时，为了向回调函数传递参数而使用字符串的形式；当需要向回调函数传递参数时，可以创建一个匿名函数，在函数内执行真实的回调函数；
onscolll，onresize等是非常耗性能，那如果我们换成ajax请求的话，那么就会缩放一次窗口会连续触发多次ajax请求，下面我们试着使用函数节流的操作试试一下；当然加个settimeout()的定时器就好了，
第一种封装方法
varcount=0;
functionoCount(){
count++;
console.log(count);
}
window.onresize=function(){
delayFun(oCount)
};
functiondelayFun(method,thisArg){
clearTimeout(method.props);
method.props=setTimeout(function(){
method.call(thisArg)
},200)
}
第二种封装方法
构造一个闭包，使用闭包的方式形成一个私有的作用域来存放定时器timer，timer是通过传参数的形式引入的。
varcount=0;
functionoCount(){
count++;
console.log(count);
}
varfuns=delayFun(oCount,100);
window.onresize=function(){
funs()
};
functiondelayFun(func,wait){
vartimer=null;
returnfunction(){
varcontext=this,
args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
func.apply(context,args);
},wait)
};
}
对第二种方法优化一下，性能会更好
这里返回一个函数，如果它被不间断地调用，它将不会得到执行。该函数在停止调用N毫秒后，再次调用它才会得到执行。如果有传递‘immediate'参数，会马上将函数安排到执行队列中，而不会延迟。
functiondelayFun(func,wait,immediate){
vartimeout;
returnfunction(){
varcontext=this,args=arguments;
varlater=function(){
timeout=null;
if(!immediate)func.apply(context,args);
};
varcallNow=immediate&&!timeout;
clearTimeout(timeout);
timeout=setTimeout(later,wait);
if(callNow)func.apply(context,args);
};
};
//用法
varmyEfficientFn=delayFun(function(){
//所有繁重的操作
},250);
window.addEventListener('resize',myEfficientFn);
函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的事件分配一个回调函数时，该函数显得尤为重要。
setTimeout这么厉害，那么我们是可以在项目中大量使用吗？
我个人是不建议的，在我们业务中，基本上是禁止在业务逻辑中使用setTimeout的，因为我所看到的很多使用方式都是一些问题不好解决，setTimeout作为一个hack的方式。
例如，当一个实例还没有初始化的前，我们就使用这个实例，错误的解决办法是使用实例时加个setTimeout，确保实例先初始化。
为什么错误？这里其实就是使用hack的手段
第一是埋下了坑，打乱模块的生命周期
第二是出现问题时，setTimeout其实是很难调试的。
我认为正确的使用方式是，看看生命周期（可参考《关于软件的生命周期》），把实例化提到使用前执行
以上就是小编为大家带来的JavaScript学习笔记整理_setTimeout的应用的全部内容了，希望对大家有所帮助，多多支持毛票票~