JavaScript 之 DOM 操作及函数封装（二）

八 、动画操作

（一）动画原理

目标位置 = 当前位置 + 步长

（二）动画函数封装

        // 定义函数，传参，element 表示dom对象，option 表示对象，foo 表示函数
        function animate(element, option, foo) {
            // 使用前清除定时器
            element.time && clearInterval(element.time)
            // 执行定时器函数
            element.time = setInterval(function () {
                // 定义开关
                var isStop = true;
                // 循环 option 对象
                for (var property in option) {
                    var value = option[property]
                    // 判断是否为透明度属性，是乘以100
                    value = property === 'opacity' ? (option[property] * 100) : parseFloat(value)
                    // 获取当前位置
                    var cssObj = getComputedStyle(element)
                    var current = cssObj[property]
                    current = property == 'opacity' ? (cssObj[property] * 100) : parseFloat(current)
                    // 步长 = (目标位置 - 当前位置) / 数字
                    var speed = (value - current) / 10
                    // 判断步长正负，目的为了使元素向两个方向移动
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
                    // 判断所有属性是否运动到目标值
                    if (current != value) {
                        // 如果存在一个属性没有达到目标位置 那就不让停止定时器
                        isStop = false
                    }
                    // 判断是否为透明度，是除以100，否则将当前位置加步长
                    var propValue = property === 'opacity' ? (current + speed) / 100 : current + speed + 'px'
                    element.style[property] = propValue;
                }
                if (isStop) {
                    // 到达位置，停止定时器
                    clearInterval(element.time)
                    // 检测是否是函数，是就执行
                    if (foo && typeof foo == 'function') {
                        foo()
                    }
                }
            }, 10)
        }

（三）防抖和节流

1. 防抖和节流思想

1.1 防抖

防抖是指相隔的时间内，如果事件再次或多次触发，会因为延迟函数被清除，从而不会执行，目的防止事件触发，导致函数被频繁执行。

1.2 节流 

节流是指间隔的时间内，事件再次或者多次触发，不会重新计算这个间隔的时间，只要时间符合条件。

2. 函数封装

2.1 防抖函数

        // callback: 回调函数
        // times: 间隔的时间
        function debounce(callback, time = 300) {
            // 定义延迟函数变量
            var delay = null;
            // 返回一个函数，这里使用了闭包
            return function () {
                // 判断延迟函数是否正在执行，执行则清除函数
                if (delay != null) clearTimeout(delay)
                // event对象    
                // arguments对象可以获取事件对象
                var _event = arguments[0]
                // 记录this指向
                var _this = this
                // 定义延迟函数
                delay = setTimeout(function(){
                    // 调用函数
                    if(callback){
                        // 使用apply改变this指向，还可以使用 call 和 bind 改变
                        callback.apply(_this,_event)
                    }
                },time)
            }
        }

2.2 节流函数

        //封装节流函数
        function throttle(callback, time = 300) {
            // 定义开始时间戳
            var nowTime = new Date().getTime()
            return function () {
                // 结束时间戳
                var endTime = new Date().getTime()
                // 时间间隔
                times = endTime - nowTime
                // 判断是否大于等于间隔的时间
                if (times >= time) {
                    var _event = arguments[0]
                    var _this = this
                    if (callback) {
                        callback.apply(_this, _event)
                    }
                    nowTime = endTime
                }

            }
        }

九、随机元素函数封装

随机元素包括随机颜色、随机尺寸、随机坐标。

// 随机颜色
function getRandomColor() {
    // 声明变量
    var red = Math.floor(Math.random() * 256);
    var green = Math.floor(Math.random() * 256);
    var blue = Math.floor(Math.random() * 256);
    // 返回字符串
    return `rgba(` + red + `,${green},${blue}, .5)`;
}
// 随机尺寸
function getRandomSize() {
    // 控制在50~200之间（包含200）
    return Math.floor(Math.random() * 201);
}
// 随机坐标
function getRandomPos() {
    // 水平坐标取值范围  100 ~ 1600
    // 垂直坐标取值范围  50 ~ 600
    return {
        // 获取指定范围的随机数
        x: Math.floor(Math.random() * (1600 - 100) + 100),
        y: Math.floor(Math.random() * (600 - 50) + 50)
    }
}