BOM_2

这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

mouseover & mouseenter区别

mouseover 经过子盒子会触发，mouseenter只经过自身盒子触发（不会冒泡） （同mouseleave）

动画函数封装

核心：setInterval（） 不断移动盒子位置
实现步骤：

1. 获取盒子当前位置
2. 让盒子当前位加上1个移动距离
3. 用定时器不断重复操作
4. 结束定时条件
5. 注意必须**添加定位**才能使用element.style.left
6. target是**“定位值”**、左边距

function animate(obj, target) {
            // 不断点击按钮，速度越来越快，开启了太多计时器
            // 解决方案就是：只有一个定时器执行(先清除以前定时器)
            clearInterval(obj.timer);
            /* var timer */ obj.timer = setInterval(function() {/* var timer弊端：1 多次开辟内存 2 timer重复命名*/
                obj.style.left = obj.offsetLeft + 1 + 'px'; /* 写操作→style，offsetLeft→只读 记得+单位 */
                if (obj.offsetLeft >= target) {
                clearInterval(obj.timer);
            }
        }, 30)
        }
        // 声明
        var div1 = document.querySelector('div.No1');
        var div2 = document.querySelector('div.No2');
        var btn = document.querySelector('button');
        // 调用
        animate(div1, 300);
        btn.addEventListener('click', function(){
            animate(div2, 400)
        });

缓慢动画

原理

var step = (target - obj.offsetLeft) / 10;
    obj.style.left = obj.offsetLeft + step + 'px';
    // 把步长改为整数，不要出现小数的问题
    var step = Math.ceil((target - obj.offsetLeft) / 10)
    step = step > 0 ? Math.ceil(step): Math.floor(step);    // “进一法”

给缓慢动画添加回调函数

回调函数：等待上一个函数完成，再执行该函数

function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step): Math.floor(step);
                obj.style.left = obj.offsetLeft + step + 'px';
                if (obj.offsetLeft == target) {
                clearInterval(obj.timer);

                // 回调函数写到定时器里面
                if (callback) {
                    // 调用函数
                    callback(); // 加括号！
                }
            }
        }, 30)
        }

animate(div1, 300, function() {
            div1.style.background = 'pink';   /* 能使用animate中的参数 */

封装后调用： <script> src="01pro_动画.js"></script>

节流阀

• 作用：防止轮播图按钮连续点击造成播放过快
• 节流阀目的：当上一个动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
• 核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
• 操作:
  1. 设置一个变量 var flag = true
  2. if (flag) {flag = false;do something} 关闭水龙头
  3. 再利用回调函数 动画执行完毕，flag = true 打开水龙头

var flag = true;
    var arrow = document.querySelector('.arrow');
    arrow.addEventListener('click', function() {
        if (flag) {
            flag = false; /* 关闭节流阀 */
            /* ``` */
            animate(ul, -num + focusWidth, function() {
                flag = true; /* 该事件结束后 打开节流阀 */
            })
            /* ``` */
        }
    })


/* if (callback) {
        // 调用函数
        callback();
    }  等价于*/
    call && callback();    // 等价写法

立即执行函数

(function(){}) () 或者 (function(){}()) 主要作用：创建一个独立的作用域，避免命名冲突问题

(function (a, b){
            console.log((a+b));
        })(1, 2);

        (function sum(a, b) {
            console.log(a+b);
        } (2, 3));

参考资料：黑马程序员JavaScript核心教程，前端基础教程，JS的DOM BOM操作教程_哔哩哔哩_bilibili

附：如有错误，恳请指正，侵权必删:D