计算数控机床

最新推荐文章于 2025-04-26 14:38:20 发布

szb0312

最新推荐文章于 2025-04-26 14:38:20 发布

阅读量137

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/szb0312/article/details/127674068

版权

day18高级函数

1.回顾

2.多属性运动完整版

function buffMove(elem, attrObj, time, fun) {//fun如果没有参数 undefined
    clearInterval(elem.timer);
    // 2.添加定时器
    elem.timer = setInterval(function () {
        // a:假设所有的属性都达到了目标点  var tag = true
        var tag = true;
        for (var i in attrObj) {
            //5.判断运动的属性
            if (i == "opacity") {
                var current = parseInt(getStyle(elem, i) * 100);//缓冲透明度 40
                attrObj[i] = attrObj[i] > 1 ? attrObj[i] : attrObj[i] * 100;
            } else {
                var current = parseInt(getStyle(elem, i));//其他属性
            }

            // 4.因为运动的目标值不一致，步长需要重新计算
            var speed = (attrObj[i] - current) / time;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);


            // 3.运动到1000px的时候 停止运动
            if (current != attrObj[i]) {
                tag = false
            }

            //6.透明度和其他属性设置方式不同
            if (i == "opacity") {
                // 改变透明度
                elem.style[i] = (current + speed) / 100;
            } else {
                // 改变其他属性
                elem.style[i] = current + speed + "px";
            }
        }
        //  c:得出结论 要么你的假设是正确的，就可以清除定时器 
        if (tag) {
            clearInterval(elem.timer);
            if (fun) fun();
        }
    }, 50)
}

3.高级函数

函数的分类
- 事件处理函数标签.事件类型 = function(){}
- 普通函数 function 函数名(){}
- 表达式函数 var 变量名 = funtion(){}
- 匿名函数 function(){}
- 立即执行函数 (匿名函数)()
- ==闭包函数==

3.1匿名函数和立即执行函数

匿名函数：没有名字的函数 function(){}
立即执行函数(IIFE)：匿名函数的执行就是立即执行函数 ==注意：分号必须要加==

<script>
        // 1.匿名函数
        /* function() {
            console.log("匿名函数")
        } */
        // 2.立即执行函数(IIFE):匿名函数的执行   (要执行的匿名函数)();  注意：分号必须要加
        (function () {
            console.log("匿名函数")
        })();


        // 3.参数
        (function (a, b) { //定义形参
            console.log(a + b);
        })(10, 20);//实参


        // 4.函数返回值
        var res = (function (a, b) {
            var c = a + b;
            return c;
        })(10, 20);
        console.log(res);//30

        // 5.立即执行函数的好处：避免全局污染(声明了一个全局变量，在任意地方都可以访问和修改)
        var a = "全局变量";
        var res = (function () {
            var a = "局部变量a";
            var b = "局部变量b";
            console.log(a, b);//局部变量a  局部变量b
            return {
                "a": a,
                "b": b,
            }
        })()

        // 在函数外侧使用局部变量a和局部变量b
        console.log(res);
        console.log(res.a);
        console.log(res.b);
        a = 456;//修改的是全局变量a 不会修改局部变量a

立即执行函数的好处：避免全局污染(意思就是不随意更改

新建一个a.js

var common = (function () {
    // 这里面会封装很多公共的方法
    function getStyle() {
        console.log("getStyl获取非行间样式")
    }
    function getCode() {
        console.log("getCode随机数")
    }

    // 如果想要让外部用这里的方法 用return返回出去
    return {
        "getStyle": getStyle,
        "getCode": getCode
    }
})();

在页面中调用

<body>
    <script>
        console.log(common)
        common.getStyle();
        // 有时候你不小心定义了一个和getStyle函数一样的变量
        var getStyle = 10;
        // getStyle();// 10() 报错  随意更改了函数名 就可以用立即执行函数来解决
        common.getStyle();//就算定义了一个和函数名相同的变量，也不会影响函数
    </script>
</body>

3.2闭包函数

可以访问其他函数内部变量的函数就是闭包

<script>
        // 1.局部函数/全局函数
        function fun1() {//fun1 全局函数
            var a = 10; //a是局部变量
            function fun2() {//fun2 是局部函数
                console.log(a);
            }
        }
        fun1();

        // 2.闭包函数  可以访问其他函数内部变量的函数就是闭包
        // 函数套函数  内部函数fun2去访问外部函数fun1中的变量a
        function fun1() {//fun1 全局函数
            var a = 10; //a是局部变量
            function fun2() {//fun2 是局部函数
                console.log(a);
            }
            return fun2;
        }
        // 想在外侧调用fun2
        var res = fun1();//res就是 funtion fun2(){console.log(a)}
        res();
    </script>

闭包函数的优缺点
- 闭包的好处：可以扩大变量的作用域范围
- 闭包的缺点：如果大量缓存数据会造成内存泄漏，不参与垃圾回收机制、

<!-- 注意：避免大量使用闭包函数 -->
    <script>
        // 1.闭包的好处：可以扩大变量的作用域范围
        function outer() {
            var a = 10;
            function inner() {
                // console.log(a);
                return a;
            }
            return inner;
        }
        var res = outer();//res就是inner函数
        var b = res();//调用inner函数  funtion inner(){ return a }
        console.log(b);//10  //原本10是局部变量 经过闭包函数 在外侧也可以访问
        // 2.闭包的缺点：如果大量缓存数据 会造成内存泄漏，不参与垃圾回收机制
        // 全局变量不会参与垃圾回收机制
        // js的垃圾回收机制：是js中定义回收资源的一种机制，每隔一段时间 js的执行环境就会自动去清理没用的变量 进行释放内存回收
        // 3.如果大量使用闭包，会造成大量内存浪费  在使用的时候 可以手动释放内存 null


        // 4.扩大变量的作用域范围
        function outer() {
            var a = 10;
            function inner() {
                a++;
                console.log(a);
            }
            return inner;
        }
        var res = outer();//res就是inner函数
        res();//11
        res();//12
        res();//13

        // 外部函数调用一次就会形成一个新的闭包
        var res1 = outer();//res1就是inner函数
        res1();//11
        res1();//12
        res1();//13
    </script>