2013.11.19

1.验证手机号码：

var p = /^[1][3-8]\d{9}$/;    // 验证手机 需限制手机位数是11位，所以加上 ^  $

 

2. 

var v = 0;

var a = (v++); // 0

var b = (v++); // 1

 

3.改函数

 1 function a (){
 2     this.title = "PP";
 3 
 4     return function(){
 5         setTimeout(function(){
 6             console.log(this.title);
 7         })
 8     }
 9 }
10 
11 var _a = a();  // a在全局里面执行， this 就是window
12 _a();              // "PP"

 

4.setTimeout 跟 setInterval 的性能差别

　　setTimeout 只会执行一次。setInterval 会每隔一段时间执行。但是不鼓励使用setInterval.

　　当回调函数的执行被阻塞时，setInterval 仍然会发布更多的毁掉指令。在很小的定时间隔情况下，这会导致回调函数被堆积起来。

　　

　　在 foo 被阻塞的时候，setInterval 仍然在组织将来对回调函数的调用。 因此，当第一次 foo 函数调用结束时，已经有 10 次函数调用在等待执行。
　　setTimeout的第一个参数运行在全局环境

　　最简单也是最容易控制的方案，是在回调函数内部使用 setTimeout 函数。(转载至：http://www.exiatian.com/%E9%AB%98%E6%80%A7%E8%83%BDsettimeout-%E5%92%8C-setinterval/)

　　下面是setInterval() 做的轮播图：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 3     <title>jQuery常用焦点图，可做选项卡切换-大前端</title>
 4     <link href="http://img.daqianduan.com/ui/favicon.ico" rel="shortcut icon">
 5     <style type="text/css">
 6 
 7     *{margin: 0;padding: 0;}
 8 
 9     .demo{ width:950px; height:300px; position:relative; overflow:hidden; border:#ddd 1px solid;}
10 
11     .num{ position:absolute;right:10px; top:10px; z-index:10;}
12 
13     .num a{ width:16px; height:16px; display:inline-block; text-align:center; margin:0 3px; cursor:pointer;}
14 
15     .num a.cur{ background:#ff6700;color:#fff;}
16 
17     .demo ul{ position:relative; z-index:5;}
18 
19     .demo ul li{ position:absolute; display:none;}
20 
21     </style>
22 
23 </head>
24 <body>
25 
26 <div class="demo">
27 
28     <div class="num"><a class="cur">1</a><a class="">2</a></div>
29 
30     <ul>
31         <li style="display: block;"><a href="" target="_blank"><img src="pic_1.jpg"></a></li>
32         <li style="display: none;"><a href="" target="_blank"><img src="pic_2.jpg"></a></li>
33     </ul>
34 
35 </div>
36 <script type="text/javascript" src="http://static.vas.pptv.com/vas/global/jquery/v_20121107163320/jquery-1.7.2.min.js"></script>
37 
38 <script type="text/javascript">
39 $(function(){
40     var sw = 0;
41     $(".demo .num a").mouseover(function(){
42         sw = $(this).index();
43         myShow(sw);
44     });
45 
46     function myShow(i){
47         $(".demo .num a").eq(i).addClass("cur").siblings("a").removeClass("cur");
48         $(".demo ul li").eq(i).stop(true,true).fadeIn(600).siblings("li").fadeOut(600);
49     }
50 
51     $(".demo ul").hover(
52         function(){
53             if(timer){
54                 clearInterval(timer);
55             }
56         },
57         function(){
58             timer = setInterval(function(){ // timer()  timer 是setInterval()的结果 ：是一个数字 不能作为函数执行 
59                 myShow(sw);
60                 sw ++;
61                 if(sw == 2){
62                     sw = 0;
63                 }
64             },800);
65         }
66     );
67     var timer = setInterval(function(){
68         myShow(sw);
69         sw ++;
70         if(sw == 2){
71             sw = 0;
72         }
73     }, 800);
74 
75 })
76 </script>
77 </body>
78 </html>

 这里的轮播的controller 就是1：鼠标移动到a标签上面；2：鼠标移动到这个滑动模块整体上面的变化；3：滑动自己进行即setInterval函数。而这些事件触发的都是一个myShow()函数，所以可以重用这个函数。

posted @ 2013-11-20 16:27  楚玉  阅读(281)  评论(0)  编辑  收藏  举报