• 【JavaScript】回调地狱以及网页轮播图底层分析

    🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

    🍇个人主页：亦世凡华、的博客

    🍓系列专栏：JavaScript专栏

    🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

    目录

    🏍️回调地狱

    🍇具体分析

    🍈完整代码

    🏃网页轮播图

    🍉制作轮播图的空间盒子，用来存放图片

    🍊点击小圆圈可以播放相应的图片

    🍋鼠标不点击，轮播图会自动播放

    🍌完整代码

    🏍️回调地狱

    🍇具体分析

    根据上文动画函数的讲解，今天更近一步加深对回调函数的使用。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div {
    10.             width: 200px;
    11.             height: 200px;
    12.             background: #f00;
    13.             margin-top: 30px;
    14.             position: absolute;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <button>测试按钮button>
    20.     <div>div>
    21. body>
    22.  
    23. html>

    通过页面的内容，我想让盒子一次性实现向左移动然后变宽然后变高然后向下移动然后向上移动，然后向左移动。。。 如何做？？？，这里我们就需要借助回调函数不断调用定时器移动，通俗点讲，我们讲多个回调函数一起使用称为“回调地狱”。

    写JS第一步通常就是获取DOM元素，但是接下来的回调函数如何书写，请看如下代码及注释：

    现在分别对代码里面的参数进行讲解：

    move参数:

    * obj:要执行动画的对象

    * attr:要执行动画的样式

    * target:执行动画的目标位置

    * speed:移动的速度(正数向右移,负数向左移)

    * callback:回调函数,这个函数将会在动画执行完毕以后执行

    getStyle参数:

    * obj:要获取样式的元素

    * name:要获取的样式名

    定时器书写完毕，我们开始调用move函数，可以看到move里面的callback回调函数里面在嵌套move，接着在回调函数里面在嵌套move，不停的在callback里面嵌套函数，达到连续的动画效果，称为“回调函数”，可以看一下效果，如下：

    1. btn.addEventListener('click', function () {
    2.     move(div, "left", 300, 10, function () {
    3.         move(div,"width",500,10,function() {
    4.             move(div,"height",300,10,function(){
    5.                 move(div,"bottom",100,10,function(){
    6.                     move(div,"top",100,10,function(){
    7.                         move(div,"left",-200,10,function(){})
    8.                     })
    9.                 })
    10.             })
    11.         })
    12.     })
    13. })

    通过画面可以看到非常丝滑的动画效果，在这我们就要思考一下，是否可以把这个动画函数封装在一个JS文件里，当我们想要实现动画效果时直接调用动画函数就可以了，答案是“可行的”。这样便于了代码的书写，大大提高了编程效率。接下来通过一个典型案例，在进行动画函数的学习。

    🍈完整代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div {
    10.             width: 200px;
    11.             height: 200px;
    12.             background: #f00;
    13.             margin-top: 30px;
    14.             position: absolute;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <button>测试按钮button>
    20.     <div>div>
    21.     <script>
    22.         var btn = document.querySelector('button')
    23.         var div = document.querySelector('div')
    24.         function move (obj, attr, target, speed, callback) {
    25.             // 关闭上一个定时器
    26.             clearInterval(obj.timer);
    27.  
    28.             // 获取元素当前位置
    29.             var current = parseInt(getStyle(obj, attr));
    30.             // 判断速度的正负值
    31.             if (current > target) {
    32.                 // 此时速度应为负值
    33.                 speed = -speed;
    34.             }
    35.  
    36.             // 开启一个定时器,用来执行动画效果
    37.             // 向执行动画的对象添加一个timer属性,用来保存它自己的定时器
    38.             obj.timer = setInterval(function () {
    39.                 // 获取目标原来的left值
    40.                 var oldValue = parseInt(getStyle(obj, attr));
    41.                 // 在旧值的基础上增加
    42.                 var newValue = oldValue + speed;
    43.                 /* 
    44.                 向左移动时,需要判断newValue是否小于target
    45.                 向右移动时,需要判断newValue是否大于target
    46.                 */
    47.                 if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
    48.                     newValue = target;
    49.                 }
    50.                 // 将新值赋予目标
    51.                 obj.style[attr] = newValue + 'px';
    52.                 // 当元素移动到target时,停止执行动画
    53.                 if (newValue == target) {
    54.                     // 达到目标关闭定时器
    55.                     clearInterval(obj.timer);
    56.                     // 动画执行完毕调用回调函数 callback
    57.                     callback && callback();
    58.                 }
    59.  
    60.             }, 30);
    61.         }
    62.         function getStyle (obj, name) {
    63.             if (window.getComputedStyle) {
    64.                 // 正常浏览器的方式,具有getComputedStyle()方法
    65.                 return getComputedStyle(obj, null)[name];
    66.             } else {
    67.                 // IE8的方式,没有getComputedStyle()方法
    68.                 return obj.currentStyle[name];
    69.             }
    70.         }
    71.  
    72.         btn.addEventListener('click', function () {
    73.             move(div, "left", 300, 10, function () {
    74.                 move(div,"width",500,10,function() {
    75.                     move(div,"height",300,10,function(){
    76.                         move(div,"bottom",100,10,function(){
    77.                             move(div,"top",100,10,function(){
    78.                                 move(div,"left",-200,10,function(){})
    79.                             })
    80.                         })
    81.                     })
    82.                 })
    83.             })
    84.         })
    85.     script>
    86. body>
    87.  
    88. html>

    🏃网页轮播图

    轮播图也称为焦点图，是网页中比较常见的特效，今天做一下这个典型案例。

    🍉制作轮播图的空间盒子，用来存放图片

    我们可以根据自己的喜好设置自己轮播图的相关样式，这里就就需要借助HTML和CSS了，讲真HTML和CSS是重点基础，如果这两个没学好，是制作不出自己想要的样式，更别提后面的JS以及相关框架了，基础才是最重要的。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         *{
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.         /* 设置outer样式 */
    14.         #outer{
    15.             /* 设置宽高 */
    16.             width: 820px;
    17.             height: 452px;
    18.             /* 居中 */
    19.             margin: 50px auto;
    20.             /* 设置背景颜色 */
    21.             background-color: #008c8c;
    22.             /* 设置padding */
    23.             padding: 10px 0;
    24.             /* 开启相对定位 */
    25.             position: relative;
    26.             /* 溢出隐藏 */
    27.             overflow: hidden;
    28.  
    29.         }
    30.         /* 设置imgList */
    31.         #imgList{
    32.             /* 去除项目符号 */
    33.             list-style: none;
    34.             /* 设置ul宽度 */
    35.             /* width: 3280px; */
    36.             /* 开启绝对定位 */
    37.             position: absolute;
    38.             /* 设置偏移量，每向左移动820px 就会显示下一张图片 */
    39.         }
    40.         /* 设置li */
    41.         #imgList li{
    42.             /* 设置浮动 */
    43.             float: left;
    44.             /* 设置左右外边距 */
    45.             margin: 0 10px;
    46.         }
    47.         /* 设置导航按钮 */
    48.         .navDiv{
    49.             /* 开启绝对定位 */
    50.             position: absolute;
    51.             /* 设置位置 */
    52.             bottom: 20px;
    53.             /* left: 35%; */
    54.         }
    55.         .navDiv a{
    56.             /* 设置浮动，浮动之后，行内元素就能设置宽高 */
    57.             float: left;
    58.             /* 设置宽高 */
    59.             width: 25px;
    60.             height: 25px;
    61.             /* 设置背景颜色 */
    62.             background-color: #f00;
    63.             /* 设置左右外边距 */
    64.             margin: 0 15px;
    65.             /* 设置半透明 */
    66.             opacity: .5;
    67.             /* 设置圆角 */
    68.             border-radius: 50%;
    69.         }
    70.         /* 设置鼠标移入效果 */
    71.         .navDiv a:hover{
    72.             background-color: green;
    73.         }
    74.     style>
    75. head>
    76. <body>
    77.     
    78.     <div id="outer">
    79.         
    80.         <ul id="imgList">
    81.  
    82.             <li><img src="./01.jpeg">li>
    83.             <li><img src="./02.jpeg">li>
    84.             <li><img src="./03.jpeg">li>
    85.             <li><img src="./04.jpeg">li>
    86.             <li><img src="./01.jpeg">li>
    87.         ul>
    88.         
    89.         <div class="navDiv">
    90.             <a href="javascript:;">a>
    91.             <a href="javascript:;">a>
    92.             <a href="javascript:;">a>
    93.             <a href="javascript:;">a>
    94.         div>
    95.     div>
    96. body>
    97. html>

     

    这里需要注意两点：

    轮播图的按钮是要通过JS来居中，因为如果借助CSS居中，就会写死，后期添加图片又要重新设置。

    javascript:;是一个伪协议，加在超级链接上就可以防止 链接跳转，从而可以给链接JS上写自己想执行的代码。javascript:void(0) 表示一个死链接，执行空事件。

    🍊点击小圆圈可以播放相应的图片

    通过JS书写动态给按钮进行居中，并设置一个点击事件，来进行图片的切换并且按钮样式虽图片的变化而变化，这里借用了“排他思想”，先干掉所有人，然后保留自己人。

    🍋鼠标不点击，轮播图会自动播放

    自动播放就涉及动画函数了，根据上文的回调地狱的讲解，将动画函数move进行封装。如下：

    1. function move(obj,attr,target,speed,callback){
    2.     // 关闭上一个定时器
    3.     clearInterval(obj.timer);
    4.  
    5.     // 获取元素当前位置
    6.     var current = parseInt(getStyle(obj,attr));
    7.     // 判断速度的正负值
    8.     if(current > target){
    9.         // 此时速度应为负值
    10.         speed = -speed;
    11.     }
    12.  
    13.     // 开启一个定时器,用来执行动画效果
    14.     // 向执行动画的对象添加一个timer属性,用来保存它自己的定时器
    15.     obj.timer = setInterval(function(){
    16.         // 获取目标原来的left值
    17.         var oldValue = parseInt(getStyle(obj,attr));
    18.         // 在旧值的基础上增加
    19.         var newValue = oldValue + speed;
    20.         /* 
    21.         向左移动时,需要判断newValue是否小于target
    22.         向右移动时,需要判断newValue是否大于target
    23.         */
    24.         if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
    25.             newValue = target;
    26.         }
    27.         // 将新值赋予目标
    28.         obj.style[attr] = newValue + 'px';
    29.         // 当元素移动到target时,停止执行动画
    30.         if(newValue == target){
    31.             // 达到目标关闭定时器
    32.             clearInterval(obj.timer);
    33.             // 动画执行完毕调用回调函数 callback
    34.             callback && callback();
    35.         }
    36.  
    37.     },30);
    38. }
    39. function getStyle(obj,name){
    40.     if(window.getComputedStyle){
    41.         // 正常浏览器的方式,具有getComputedStyle()方法
    42.         return getComputedStyle(obj,null)[name];
    43.     }else{
    44.         // IE8的方式,没有getComputedStyle()方法
    45.         return obj.currentStyle[name];
    46.     }
    47. }
    48.

    接下里通过引入move函数实现动画效果。

    2. <script src="./move.js">script>

    可以看到代码中，我们设计了一个定时器实现自动切换图片，并设计在点击函数中关闭定时器，这样就不会出现点击事件和自动播放发生冲突，造成图片的怪异播放现象。

    🍌完整代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         *{
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.         /* 设置outer样式 */
    14.         #outer{
    15.             /* 设置宽高 */
    16.             width: 820px;
    17.             height: 452px;
    18.             /* 居中 */
    19.             margin: 50px auto;
    20.             /* 设置背景颜色 */
    21.             background-color: #008c8c;
    22.             /* 设置padding */
    23.             padding: 10px 0;
    24.             /* 开启相对定位 */
    25.             position: relative;
    26.             /* 溢出隐藏 */
    27.             overflow: hidden;
    28.  
    29.         }
    30.         /* 设置imgList */
    31.         #imgList{
    32.             /* 去除项目符号 */
    33.             list-style: none;
    34.             /* 设置ul宽度 */
    35.             /* width: 3280px; */
    36.             /* 开启绝对定位 */
    37.             position: absolute;
    38.             /* 设置偏移量，每向左移动820px 就会显示下一张图片 */
    39.         }
    40.         /* 设置li */
    41.         #imgList li{
    42.             /* 设置浮动 */
    43.             float: left;
    44.             /* 设置左右外边距 */
    45.             margin: 0 10px;
    46.         }
    47.         /* 设置导航按钮 */
    48.         .navDiv{
    49.             /* 开启绝对定位 */
    50.             position: absolute;
    51.             /* 设置位置 */
    52.             bottom: 20px;
    53.             /* left: 35%; */
    54.         }
    55.         .navDiv a{
    56.             /* 设置浮动，浮动之后，行内元素就能设置宽高 */
    57.             float: left;
    58.             /* 设置宽高 */
    59.             width: 25px;
    60.             height: 25px;
    61.             /* 设置背景颜色 */
    62.             background-color: #f00;
    63.             /* 设置左右外边距 */
    64.             margin: 0 15px;
    65.             /* 设置半透明 */
    66.             opacity: .5;
    67.             /* 设置圆角 */
    68.             border-radius: 50%;
    69.         }
    70.         /* 设置鼠标移入效果 */
    71.         .navDiv a:hover{
    72.             background-color: green;
    73.         }
    74.     style>
    75.     <script>
    76.         window.addEventListener('load',function(){
    77.             // 获取ul标签
    78.             var ul = document.querySelector('#imgList')
    79.             // 获取ul下li的子元素的个数,并给ul动态赋予宽度值
    80.             ul.style.width = ul.children.length * 820 + 'px';
    81.  
    82.             // 设置导航按钮动态居中
    83.             var navDiv = document.querySelector('.navDiv');
    84.             var outer = document.querySelector('#outer');
    85.             navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + 'px';
    86.  
    87.             // 默认显示图片的索引
    88.             var index = 0;
    89.             // 获取所有的a
    90.             var aAll = document.querySelector('.navDiv').querySelectorAll('a');
    91.             // 设置默认选中效果
    92.             aAll[index].style.backgroundColor = 'green';
    93.  
    94.             // 为所有超链接绑定响应函数
    95.             for(var i = 0;ilength;i++){
    96.                 // 为每一个超链接都添加一个num属性
    97.                 aAll[i].num = i;
    98.                 // 为超链接绑定点击响应函数
    99.                 aAll[i].addEventListener('click',function(){
    100.                     //关闭自动切换的定时器
    101.                     clearInterval(stop);
    102.                     
    103.                     // 获取超链接的索引,并将其设置为index
    104.                     index = this.num;
    105.                     // 切换图片
    106.                     // imgList.style.left = -820*index + 'px';
    107.                     setA();
    108.                     move(imgList,"left",-820*index,20,function(){
    109.                         //动画执行完毕，开启自动切换
    110.                         autoChange();
    111.                     })
    112.                 })
    113.             }
    114.             // // 开启自动切换图片
    115.             autoChange();
    116.             
    117.             // 创建一个方法用来选中a
    118.             function setA(){
    119.                 // 判断当前索引是否是第一张
    120.                 if(index >= ul.children.length-1){
    121.                     // 则将index设置为0
    122.                     index = 0;
    123.                     // 此时显示最后一张图片，而最后一张图片和第一张一模一样
    124.                     // 通过CSS将最后一张切换成第一张
    125.                     imgList.style.left = 0 + 'px';
    126.                 }
    127.                 for(var i = 0;ilength;i++){
    128.                     aAll[i].style.backgroundColor = '';
    129.                 }
    130.                 // 创建点击时的颜色
    131.                 aAll[index].style.backgroundColor = 'green';
    132.             }   
    133.             // 创建一个函数,用来开启自动切换图片
    134.             // 定义一个自动切换的定时器的标识
    135.             var stop;
    136.             function autoChange(){
    137.                 // 开启一个定时器,用来定时切换图片
    138.                 stop = setInterval(function(){
    139.                     // 使索引自增
    140.                     index++;
    141.                     
    142.                     // 判断index的值
    143.                     index %= ul.children.length;
    144.                     
    145.                     // 执行动画来切换图片
    146.                     move(imgList,"left",-820*index,20,function(){
    147.                         // 设置导航点
    148.                         setA();
    149.                     })
    150.                 },3000);
    151.             };
    152.         })
    153.         
    154.     script>
    155.     <script src="./tool.js">script>
    156. head>
    157. <body>
    158.     
    159.     <div id="outer">
    160.         
    161.         <ul id="imgList">
    162.  
    163.             <li><img src="./01.jpeg">li>
    164.             <li><img src="./02.jpeg">li>
    165.             <li><img src="./03.jpeg">li>
    166.             <li><img src="./04.jpeg">li>
    167.             <li><img src="./01.jpeg">li>
    168.         ul>
    169.         
    170.         <div class="navDiv">
    171.             <a href="javascript:;">a>
    172.             <a href="javascript:;">a>
    173.             <a href="javascript:;">a>
    174.             <a href="javascript:;">a>
    175.         div>
    176.     div>
    177. body>
    178. html>

    🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

    呜呜~，原创不易。

  • 相关阅读:
    Nginx详解 五：反向代理
    分布式之业务高可用
    [正确重装docker] Win10 重装 Docker 提示 Exising installation is up to date 的正确姿势
    滴灌通运营模式遭质疑：是P2P，是套利，还是模式创新？
    UNIAPP day_05(9.3) Cookie、WebStorage、Session 和 Token的区别、uni-app最终部署
    （数字图像处理MATLAB+Python）第十一章图像描述与分析-第五、六节：边界描述和矩描述
    volatility， polarizability， viscosity， electronegativity & hydrogen bonding
    Invertible Image Signal Processing 可逆图像信号处理
    无法获取下载文件名的无奈之举
    麒麟 Kylin V10 一键安装 Oracle 11GR2 单机 ASM（231017）
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/126067318