[JavaScript知识库]轮播图第一步-运动函数的封装

function move(element, obj, callback = function () { }) {
    let num = 0;
    // 定义一个变量存储定时器的个数
    // 初始值是0
    for (let type in obj) {
        // 循环遍历这个对象
        // 使用let定义变量每一个循环中变量存储独立的属性 不会被覆盖
        // 每次循环触发生成一个定时器 操作对应的属性和属性值
        num++;
        // 对象循环一次,证明对象中有一对属性和属性值
        // 也就是一个定时器需要改变属性属性值
        // 此时num+1
        let startVal = type === 'opacity' ? window.getComputedStyle(element)[type] * 100 : parseInt(window.getComputedStyle(element)[type]);
        //    获取初始值并且兼容透明度
        let endVal = type === 'opacity' ? obj[type] * 100 : obj[type];
        //    获取最终值并且兼容透明度

        // 用time来记录定时器变化
        let time = setInterval(function () {
            // 定义步长
            let step = endVal - startVal;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            // 当步长大于0 时向上取整 小于0时,向下取整
            startVal += step;
            //对象的属性的变化值
            element.style[type] = type === 'opacity' ? startVal / 100 : startVal + 'px';
            if (startVal === endVal) {
             
                clearInterval(time);
                // 清除定时器也就是运动终止时
                num--;
                // 每清除一个定时器num-1;
                if (num === 0) {
                    // 当num的值累加至0时,表示所有的定时器都清除了
                    // 此时使用回调函数
                    callback();
                }
            }
        }, 30)
    }

}

在这里一定要注意异步池的概念哦!关于异步池的知识点,后面会给大家补充,大家在这里只需要知道是先执行for...in循环,异步池中的内容不会执行,等到for...in执行完毕后,再执行异步池的内容