这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 JavaScript 学习笔记整理_setTimeout 的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
setTimeou 的 t 应用
- var ids = [];
- function foo1(i) {
- this.i = i;
- console.log('i = ' + i);
- ids[0] = setTimeout((function() {
- foo1(i);
- }), 1000);
- }
- function foo2(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() 的定时器就好了,
第一种封装方法
- var count = 0;
- function oCount() {
- count++;
- console.log(count);
- }
- window.onresize = function() {
- delayFun(oCount)
- };
- function delayFun(method, thisArg) {
- clearTimeout(method.props);
- method.props = setTimeout(function() {
- method.call(thisArg)
- },
- 200)
- }
第二种封装方法
构造一个闭包,使用闭包的方式形成一个私有的作用域来存放定时器 timer, timer 是通过传参数的形式引入的。
- var count = 0;
- function oCount() {
- count++;
- console.log(count);
- }
- var funs = delayFun(oCount, 100);
- window.onresize = function() {
- funs()
- };
- function delayFun(func, wait) {
- var timer = null;
- return function() {
- var context = this,
- args = arguments;
- clearTimeout(timer);
- timer = setTimeout(function() {
- func.apply(context, args);
- },
- wait)
- };
- }
对第二种方法优化一下,性能会更好
这里返回一个函数,如果它被不间断地调用,它将不会得到执行。该函数在停止调用 N 毫秒后,再次调用它才会得到执行。如果有传递'immediate' 参数,会马上将函数安排到执行队列中,而不会延迟。
- function delayFun(func, wait, immediate) {
- var timeout;
- return function() {
- var context = this,
- args = arguments;
- var later = function() {
- timeout = null;
- if (!immediate) func.apply(context, args);
- };
- var callNow = immediate && !timeout;
- clearTimeout(timeout);
- timeout = setTimeout(later, wait);
- if (callNow) func.apply(context, args);
- };
- };
- // 用法
- var myEfficientFn = delayFun(function() {
- // 所有繁重的操作
- },
- 250);
- window.addEventListener('resize', myEfficientFn);
函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的事件分配一个回调函数时,该函数显得尤为重要。
setTimeout 这么厉害,那么我们是可以在项目中大量使用吗?
我个人是不建议的,在我们业务中,基本上是禁止在业务逻辑中使用 setTimeout 的,因为我所看到的很多使用方式都是一些问题不好解决,setTimeout 作为一个 hack 的方式。
例如,当一个实例还没有初始化的前,我们就使用这个实例,错误的解决办法是使用实例时加个 setTimeout,确保实例先初始化。
为什么错误?这里其实就是使用 hack 的手段
第一是埋下了坑,打乱模块的生命周期
第二是出现问题时,setTimeout 其实是很难调试的。
我认为正确的使用方式是,看看生命周期(可参考《关于软件的生命周期 》),把实例化提到使用前执行
以上就是小编为大家带来的 JavaScript 学习笔记整理_setTimeout 的应用的全部内容了,希望对大家有所帮助,多多支持 phperz~
来源: http://www.phperz.com/article/17/0523/331768.html