Day16

1-什么是事件委托，原理是什么？

原理：利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
　　作用：减少DOM操作，节省内存空间，提高性能。

 

2-js 中有几种定时器，有什么区别？

(1)定时器setTimeOut()与clearTimeOut()

   setTimeOut()使用方法：< …… onClick="timerID=setTimeout('display ()',5000)">

   1.设置定时器的名称为timeID以便以后终止定时器时用到clearTimeOut(timeID)。

   2.display()方法要使用单引号。

   3.点击事件发生5000毫秒之后执行display()方法一次。

(2)定时器setInterval()与clearInterval()

    setInterval()使用方法：<……onClick="timerID=setInterval ('display ()',5000)">

   1.设置定时器的名称为timeID以便以后终止定时器时用到clearInterval(timeID)。

   2.display()方法要使用单引号。

   3.点击事件发生5000毫秒之后重复的执行display()方法。直到关闭窗口或者调用clearInterval()

 

3-如何清除定时器？

定时器一般有两个

1)setTimeout();//n毫秒后执行一次

2)setInterval();//每隔n秒执行一次

这两个方法都有个返回值,返回一个定时器id,可以定义一个变量接收

清除定时器方法:

setTimeout()对应的是 clearTimeout(id);

setInterval()对应的是 clearInterval(id);

4-封装一个动画函数

<script>

        function fn(a, b, c) {

            console.log(c);

            console.log(b);

            // 先清除在执行  只保留一个定时器执行

            clearInterval(a.ff)

            // a.ff 表示：谁的函数 动态的

            a.ff = setInterval(function () {

                // 步长值要写在定时器的里面

                // 把步长值改为整数  不要出现小数的问题

                let step = (b - a.offsetLeft) / 10;

                // 判断步长值  如果是正值，则步长往大了取整   如果是负值，则步长向小了取整

                step = step > 0 ? Math.ceil(step) : Math.floor(step)

                if (a.offsetLeft == b) {

                    // 停止动画(定时器)

                    clearInterval(a.ff)

                    //  && 左右都是true的时候才会运行

                    c && c()

                }

                // 把每次加1  这个步长值改为一个慢慢变小的值  （目标值-现在的位置）/ 10

                a.style.left = a.offsetLeft + step + 'px';

                // console.log(a.offsetLeft);

            }, 15) // 15 为多少毫秒 运动一次

    </script>  

functionfn(a, b, c){ console.log(c); console.log(b);// 先清除在执行 只保留一个定时器执行clearInterval(a.ff)// a.ff 表示：谁的函数 动态的 a.ff =setInterval(function(){// 步长值要写在定时器的里面// 把步长值改为整数 不要出现小数的问题let step =(b - a.offsetLeft)/10;// 判断步长值 如果是正值，则步长往大了取整 如果是负值，则步长向小了取整 step = step >0? Math.ceil(step): Math.floor(step)if(a.offsetLeft == b){// 停止动画(定时器)clearInterval(a.ff)// && 左右都是true的时候才会运行 c &&c()}// 把每次加1 这个步长值改为一个慢慢变小的值 （目标值-现在的位置）/ 10 a.style.left = a.offsetLeft + step +'px';// console.log(a.offsetLeft);},15)// 15 为多少毫秒 运动一次