JavaScript回调函数在链式运动的作用------JavaScript学习之路19

最新推荐文章于 2021-05-20 09:23:53 发布

dragoned_123

最新推荐文章于 2021-05-20 09:23:53 发布

阅读量140

点赞数

分类专栏： JavaScript 文章标签： javascript css css3 html html5

本文链接：https://blog.csdn.net/dragoned_123/article/details/107532677

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

JavaScript回调函数在链式运动的作用

JavaScript回调函数在链式运动的作用

rufuo

回调函数

什么是回调函数？就是在另外一个函数的参数中，传入的是一个函数指针

function hello() {//回调函数
    return "hello world";
}

function doit(str1,str2,fun) {//【注意】传入的是一个函数的形参，如果允许函数要有括号fun()
    console.log(str1+str2+":"+fun());//允许函数fun()
}

doit("参数1","参数2",hello);//把hello的指针当作参数传给了fun，之后在doit里面实现了fun()其实就是hello()

链式运动

链式运动就是在物体第一个运动结束的时候执行第二个运动，在第二个运动结束后执行第三个运动以此类推。。。

比如：在一个物体的宽度变宽后使物体的高度变高最后让物体的透明度增加。这些都是连贯完成，要想完成这些效果必须在宽度达到目的宽度后执行使物体变高的函数，这个执行变高的函数就需要通过形参传入到第一次执行物体变宽的函数中，这样可以使得封装的函数有更大的灵活性。

效果

在这里插入图片描述

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>链式运动</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            position: relative;
            top: 100px;
            left: 600px;
            height: 600px;
            width: inherit;
        }

        #d1{
            width: 60px;
            height: 60px;
            background-color: #28a4c9;
            position: absolute;
            opacity: 0.3;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<script>
    // function hello() {//回调函数
    //     return "hello world";
    // }
    //
    // function doit(str1,str2,fun) {//【注意】传入的是一个函数的形参，如果允许函数要有括号fun()
    //     console.log(str1+str2+":"+fun());//允许函数fun()
    // }
    //
    // doit("参数1","参数2",hello);//把hello的指针当作参数传给了fun，之后在doit里面实现了fun()其实就是hello()


    function domove(node,movname,target,fun) {//封装了一个函数来控制宽高透明度的缓冲变化,使用回调函数fun
        clearInterval(node.timer);
        node.timer = setInterval(function () {
            let wid = null;
            if(movname == "opacity"){
                wid = parseInt(parseFloat(getStyle(node,"opacity"))*100);//得到透明度
            }else {
                wid = parseInt(getStyle(node,movname));//注意吧px去掉
            }
            let speed = (target-wid)/8;//获得缓冲速度
            speed = speed>0? Math.ceil(speed):Math.floor(speed);
            if(wid == target){
                clearInterval(node.timer);//到达目的值就结束时间函数
                if (fun){
                    fun.call(node);//更改回调函数的this指向为node对象
                    fun();//运行调函数
                }
            }else {
                if(movname == "opacity"){
                    node.style.opacity = (wid + speed)/100;
                    console.log(wid+speed);
                    node.style.filter = "alpha(opacity="+wid+speed+")";//设置透明度
                }else {
                    node.style[movname] = wid + speed + "px";//设置宽度或者高度
                }
            }
        },30);
    }
    function getStyle(node,style) {
        return node.currentStyle ? node.currentStyle[style] : getComputedStyle(node)[style];//获取样式做了浏览器兼容
    }
    let d1 = document.getElementById("d1");
    d1.onmouseover = function () {
        domove(this,"width",200,function () {//回调匿名函数1
            domove(this,"height",200,function () {//回调匿名函数2
                domove(this,"opacity",100);//回调匿名函数3
            });
        });
    }
    d1.onmouseout = function () {
        domove(this,"opacity",30,function () {
            domove(this,"height",60,function () {
                domove(this,"width",60);
            });
        });
    }

</script>
</body>
</html>

dragoned_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript回调函数在链式运动的作用------JavaScript学习之路19

文章目录JavaScript回调函数在链式运动的作用回调函数链式运动效果完整源码JavaScript回调函数在链式运动的作用rufuo回调函数什么是回调函数？就是在另外一个函数的参数中，传入的是一个函数指针function hello() {//回调函数 return "hello world";}function doit(str1,str2,fun) {//【注意】传入的是一个函数的形参，如果允许函数要有括号fun() console.log(str1+str2+":"+
复制链接

扫一扫

专栏目录