一个简单效果用到的js特性（异步编程,匿名函数,闭包）
效果：轮询显示隐藏所有p标签，显示用打印机效果一个字符一个字符地显示，淡出隐藏。
准备知识
- js异步编程(setInterval setTimeout)
JS 本身是单线程运行的，不可能在一段代码还未结束运行时去运行别的代码，因此也就不存在异步执行的概念。但是，如果某个函数做的事情是创建一个别的线程或进程，并与JS主线程并行地做一些事情，并在事情做完后通知 JS 主线程，就能异步。
function aa(){
console.log("aa");
}
console.log(0);
setTimeout(aa,0);
console.log(1);
//执行结果0 1 aa
/*解释：主线程从console.log(0);到console.log(1);
当执行到setTimeout时，创建子线程aa(回掉函数),
创建完之后并不立即执行aa,而是执行主线程console.log(1);
然后当主线程执行结束，执行回掉函数aa。
*/- 匿名函数
没有函数名的自执行函数，只是一种js写法
function aa(p){
console.log("参数",p);
}
aa("a");//打印结果：参数 a
//以上正常写法，下面是匿名函数写法
(function(p){
console.log("参数",p);
})("a")
/*
解释：格式()()
第一个()定义没有函数名的函数
第二个()表示函数的入参
*/- 闭包
有权访问另一个函数作用域中的变量的函数
function aa(){
var index =0;
var bb = function(){
return index++;
} ;
return bb;
}
var f = aa();//执行aa(),返回的是一个函数
f();//0
f();//1
/*
函数作用域，函数aa的执行环境（变量index和函数bb）
index就是aa函数作用域的变量;
可以看出bb函数能够访问aa函数的变量index;
然后可以发现index的值只能通过f()来访问；
这一特性可用来实现封装，私有成员等
*/html代码
<html>
<script src="jquery.min.js">script>
<style>
p{
display:none;
}
style>
<body>
<p>1,2,3,4,5,6,7,8,9p>
<p>A,B,C,D,E,p>
<p>wel,p>
body>
html>很简单，隐藏3行p
js代码
<script>
//设置单个p元素显隐，dom： p对象，s： 一个完整显示隐藏所需时间
function showP(dom,s){
var texts = dom.html().split("");
var per = s/2/texts.length;
dom.html("").show();
for(var i=0;ifunction(index){
//闭包，此函数能访问showP函数作用域内部的变量i：
setTimeout(function(){
dom.append(texts[index]);
if(index == texts.length-1){
dom.fadeOut(s/2)////用s/2时间隐藏
}
},per*index);//匿名函数的写法
})(i);
}
}
//所有p依次轮询，p:所有p jq对象，per 每一个p显示隐藏用时
function startShow(p,per){
p.each(function(i,obj){
setTimeout(function(){
console.log($(obj));
showP($(obj),per)
},per*i);
});
}
//定时器，p:所有p jq对象，per:每一个p显示隐藏用时
function setIntImer(dom,per){
startShow(dom,per);
return setInterval(function(){
//定时器会在per*dom.length 毫秒后执行startShow函数
startShow(dom,per);
},per*dom.length);
}
//清除定时器
function closeInt(inter){
clearInterval(inter);
}
var p = $("p");
var per = 4000;//每一次显示隐藏设置用时4秒
var total = per*p.length;//所有p完成一次轮询用时4*3=12秒
var ss = setIntImer(p,per);
//clearInterval(ss)//关闭定时器
script>完整代码
<html>
<script src="jquery.min.js">script>
<style>
p{
display:none;
}
style>
<body>
<p>1,2,3,4,5,6,7,8,9p>
<p>A,B,C,D,E,p>
<p>wel,p>
<script>
//设置单个p元素显隐，dom： p对象，s： 一个完整显示隐藏所需时间
function showP(dom,s){
var texts = dom.html().split("");
var per = s/2/texts.length;
dom.html("").show();
for(var i=0;ifunction(index){
//闭包，此函数能访问showP函数作用域内部的变量i：
setTimeout(function(){
dom.append(texts[index]);
if(index == texts.length-1){
dom.fadeOut(s/2)////用s/2时间隐藏
}
},per*index);//匿名函数的写法
})(i);
}
}
//所有p依次轮询，p:所有p jq对象，per 每一个p显示隐藏用时
function startShow(p,per){
p.each(function(i,obj){
setTimeout(function(){
console.log($(obj));
showP($(obj),per)
},per*i);
});
}
//定时器，p:所有p jq对象，per:每一个p显示隐藏用时
function setIntImer(dom,per){
startShow(dom,per);
return setInterval(function(){
//定时器会在per*dom.length 毫秒后执行startShow函数
startShow(dom,per);
},per*dom.length);
}
//清除定时器
function closeInt(inter){
clearInterval(inter);
}
var p = $("p");
var per = 4000;//每一次显示隐藏设置用时4秒
var total = per*p.length;//所有p完成一次轮询用时4*3=12秒
var ss = setIntImer(p,per);
//clearInterval(ss)//关闭定时器
script>
body>
html>
。