发布于 2014-10-15 17:54:32 | 194 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


本文为大家讲解的是setInterval()和setTimeout()的两种使用方式及作用域和区别,感兴趣的同学参考下。

setInterval()是以指定的时间为周期调用函数的方法。

setTimeout()是延时指定的时间来执行某个函数的方法。

两个函数虽然作用不同,但传参方式和作用域是相同的,下面来具体分析一下。

以setInterval()为例:

第一个参数是用来传递要调用的方法,可以传递一个代码串,如下:

1 <script>
2     function fn(value){
3         alert("value=" + value);
4     }
5     setTimeout("fn(1)", 1000);
6 </script>

但是当在一个闭包里调用的时候,就会出现问题,如:

 
 1 <script>
 2     function outerFn(){
 3         var value = 1;
 4         function fn(){
 5             alert("value=" + value);
 6             value += 1;
 7         }
 8         setInterval("fn()", 3000);
 9     }
10     outerFn();
11 </script>
 

会出现错误:Uncaught ReferenceError: fn is not defined 

原因是fn()是以字符串的方式传递的,它的作用域是全局作用域,全局作用域是无法访问到fn()的。

解决的办法是fn以函数引用的方式传递,也就是setInterval()的第二种传参方式。

 
 1 <script>
 2     function outerFn(){
 3         var value = 1;
 4         function fn(){
 5             alert("value=" + value);
 6             value += 1;
 7         }
 8         setInterval(fn, 3000);
 9     }
10     outerFn();
11 </script>
 

但是这样又带来问题,如果想给fn传参数怎么办?可以像如下这样去写吗?

 
 1 <script>
 2     function outerFn(){
 3         var value = 1;
 4         function fn(n){
 5             alert("value=" + n);
 6         }
 7         setTimeout(fn(5), 1000);
 8     }
 9     outerFn();
10 </script>
 

答案是不可以的,函数只写函数名,是函数引用;后面加括号是函数执行。

1 setTimeout(fn, 1000); //fn的引用
2 setTimeout(fn(5), 1000);  //fn直接执行

所以第7行,没有按照预期延迟1000毫秒执行fn(5),而是立刻就执行了。这要注意和上面第一种方式——传递代码字符串的不同。

如果确实有从外部传参的需要,该怎么办呢?

 
1 <script>
2     function outerFn(value){
3         function fn(){
4             alert("value=" + value);
5         }
6         setTimeout(fn, 1000);
7     }
8     outerFn(5);
9 </script>
 

如上,是利用了闭包的原理,fn作为内部函数,是可以访问包含它的outerFn的作用域中的变量的,因此我们想给fn传参,只要给outerFn传参就可以了。这在传递的参数复杂(比如是一个复杂的json)的情况下,很有用途。



相关阅读 :
setInterval()和setTimeout()的两种使用方式及作用域
JS创建类和对象的两种不同方式
浅谈JavaScript中setInterval和setTimeout的使用问题
JavaScript中的函数的两种定义方式和函数变量赋值
JS 动态加载js文件和css文件 同步/异步的两种简单方式
javascript中createElement的两种创建方式
将HTML的左右尖括号等转义成实体形式的两种实现方式
setInterval()和setTimeout()的用法和区别示例介绍
javascript自定义startWith()和endWith()的两种方法
详解JS中定时器setInterval和setTImeout的this指向问题
JavaScript中定义对象原型的两种使用方法
JS控制HTML元素的显示和隐藏的两种方法
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务