闭包的应用 -- 最基础的闭包演示（立即执行函数）

最新推荐文章于 2024-08-18 08:09:12 发布

奇葩之小王子

最新推荐文章于 2024-08-18 08:09:12 发布

阅读量133

点赞数

文章标签： js css html

本文链接：https://blog.csdn.net/qq_52138438/article/details/115402775

版权

闭包的应用 – 最基础的闭包演示（立即执行函数）
—源自作者看黑马程序员的讲解而做的笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_闭包应用</title>
</head>
<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        //闭包应用-点击li输出当前li的索引号
        //法1.利用动态添加属性的方式
        var lis = document.querySelector('.nav').querySelectorAll('li')
        // for(var i = 0;i<lis.length;i++){
        //     lis[i].index = i;
        //     lis[i].onclick = function(){
        //         console.log(this.index);
        //     }
        // }

        //法2.利用闭包的方式得到当前小li的索引号
        //立即执行函数也称为小闭包,因为立即执行函数里面的任何一个函数都可以使用它的i这变量(也被称为内存泄漏)
        for(var i = 0;i<lis.length;i++)
        {
            (function(i){
                // console.log(i);
                lis[i].onclick = function(){
                    console.log(i);
                }
            })(i)
        }
    </script>
</body>
</html>

以及下面的结合定时器的使用方法（和定时器一起使用，是常用的方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_闭包循环定时器</title>
</head>
<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        //闭包应用-3秒后，打印所有的li内容
        var lis = document.querySelector('.nav').querySelectorAll('li')
        for(var i = 0;i<lis.length;i++)
        {
           (function(i){
                setTimeout(function(){
                    console.log(lis[i].innerHTML);
                }, 3000);
           })(i)
        }
    </script>
</body>
</html>

奇葩之小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
闭包的应用 -- 最基础的闭包演示（立即执行函数）

闭包的应用 – 最基础的闭包演示（立即执行函数）—源自作者看黑马程序员的讲解而做的笔记<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
复制链接

扫一扫