效果:轮询显示隐藏所有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代码
<!DOCTYPE html>
<html>
<script src="jquery.min.js"></script>
<style>
p{
display:none;
}
</style>
<body>
<p>1,2,3,4,5,6,7,8,9</p>
<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;i<texts.length;i++){
(function(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>
完整代码
<!DOCTYPE html>
<html>
<script src="jquery.min.js"></script>
<style>
p{
display:none;
}
</style>
<body>
<p>1,2,3,4,5,6,7,8,9</p>
<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;i<texts.length;i++){
(function(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>
。