闭包案例：1. 循环注册点击事件 2. 循环中的 setTimeout() 3. 计算打车价格

最新推荐文章于 2021-11-08 15:45:09 发布

_Tough_Girl

最新推荐文章于 2021-11-08 15:45:09 发布

阅读量124

点赞数

分类专栏： JavaScript 案例文章标签： javascript

本文链接：https://blog.csdn.net/icemwj/article/details/120474866

版权

JavaScript 案例专栏收录该内容

22 篇文章 6 订阅

订阅专栏

1、循环注册点击事件（经典的面试题）

描述：点击 li 输出当前 li 的索引号

方法一：利用动态添加属性的方式获取到当前 li 的索引号。
方法二：利用闭包的方式得到当前小 li 的索引号。

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>闭包应用-点击li输出当前li的索引号(这是一个非常经典的面试题)</title>
</head>

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>

    <script>
        // 闭包应用-点击li输出当前li的索引号(这是一个非常经典的面试题)
        var lis = document.querySelector('.nav').querySelectorAll('li');
         
        // 方法一：
        // 1. 我们可以利用动态添加属性的方式
        // for循环是立即执行，同步的, 而点击事件的函数是异步的
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function () {
                // console.log(i);  // 4
                console.log(this.index);
            };
        }

        // 方法二：
        // 2. 利用闭包的方式得到当前小li 的索引号
        for (var i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包 因为立即执行函数里面的任何一个函数都可以使用它的i这一变量
            (function (i) {
                // console.log(i);
                lis[i].onclick = function () {
                    console.log(i);
                }
            })(i);
        }
    </script>
</body>

</html>

2、循环中的 setTimeout()

描述：3秒钟之后，打印所有 li 元素的内容

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>闭包应用——3秒钟之后,打印所有li元素的内容</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>

3、计算打车价格

描述：打车起步价13元（3公里内），之后每多一公里增加 5 块钱。用户输入公里数就可以计算打车价格，如果有拥堵情况，总价格多收取10块钱拥堵费。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>闭包应用-计算打车价格</title>
</head>

<body>
    <script>
        var car = (function () {
            var start = 13;  // 起步价  局部变量
            var total = 0;   // 总价  局部变量
            return {
                // 正常的总价
                price: function (n) {
                    if (n <= 3) {
                        total = start;
                    } else {
                        total = start + (n - 3) * 5;
                    }
                    return total;
                },
                // 拥堵之后的费用
                yd: function (flag) {
                    return flag ? total + 10 : total;
                }
            }
        })();
        console.log(car.price(5));  // 23
        console.log(car.yd(true));  // 33

        console.log(car.price(1));  // 13
        console.log(car.yd(false)); // 13
    </script>
</body>

</html>