一个简单效果用到的js特性（异步编程,匿名函数,闭包）

最新推荐文章于 2022-10-18 23:44:03 发布

云水天堂

最新推荐文章于 2022-10-18 23:44:03 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签：闭包匿名函数 js异步编程

本文链接：https://blog.csdn.net/u013561386/article/details/73277458

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果：轮询显示隐藏所有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>

。

云水天堂

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个简单效果用到的js特性（异步编程,匿名函数,闭包）

效果：轮询显示隐藏所有p标签，显示用打印机效果一个字符一个字符地显示，淡出隐藏准备知识js异步编程(setInterval setTimeout) JS 本身是单线程运行的，不可能在一段代码还未结束运行时去运行别的代码，因此也就不存在异步执行的概念。但是，如果某个函数做的事情是创建一个别的线程或进程，并与JS主线程并行地做一些事情，并在事情做完后通知 JS 主线程，就能异步。function
复制链接

扫一扫