setInterval setTimeout 定时器；边界动画判断

**一，定时器**
setInterval:每间隔多久执行一次； clearTimeout clearInterval
setTimeout：只执行一次；

（1）window.setInterval(fn,time,opation):支持三个参数，第三个参数的值是在函数执行的时候传递的实参值；（ie9及以下不兼容）

（2）关于定时器this和传参的问题；
    定时器里面的this是window；改变定时器里面的this我们用bind；
    bind不兼容ie6-8
    bind：改变this，传递参数，但是函数不会执行，我们只是提前修改了函数中的this、
    setTimeout（function（）{}.bind(this,参数)，500）；

    兼容定时器函数传递参数，改变this的方法；
    //利用闭包保存机制，来形成一个不销毁的作用域，来保存this和参数，
    var obj={name:100}
    window.setTimeout(sum.call(obj,100),500)
    function sum(name) {
        var that = this;
            return function () {
               console.log(that);
                console.log(name)
            }
     }
（3）定时器的返回值
    设置定时器都会有返回值，返回值是一个数字，代表当前是第几个定时器；随着设置定时器的增多，我们的数字也会增加；（ie中的定时器关闭浏览器返回值不会关闭）
clearTimeout（Number），clearTimout（number）

    当我们把页面中的某一个定时器清除以后，后面的排序好不会发生改变，当在设置一个定时器，会基于最后一个累加，（银行排好办业务一样）

    把浏览器关闭重新打开定时器返回值是从开始；

（4）定时器递归
    var n=0;
    var timer = null
    timer=window.setTimeout(fn,1000)
    function fn() {
        clearTimeout(timer)// 把上一次的定时器的返回值定时器清除掉
        n++
        if (n>5) {
            clearTimeout(timer);
            return;
        }
        timer=window.setTimeout(fn,1000) 
    }

（5）定时器的异步和同步（主任务和等待任务）（sync同步    async异步）
    **异步编程**：一个任务需要等待一会在做，我们先把它放在等待任务队列中，主任务执行完成后，才能去等待任务中执行之前等待的任务；
    **同步编程**：在主任务当列中，代码从上到下依次执行，上面的执行完后，才往下执行；

    异步：所有的定时器，ajax请求，事件绑定，都是异步编程；（js编程中严禁格式3种）
    定时器设置的等待时间是0，也不会理解执行，浏览器在执行的时候，都需要一定的时间执行；浏览器都有反应时间的；

    检测代码执行性能时间：
    var startTime = new Date();
    for (var i=0; i<100000000;i++){
    }
    var endTime = new Date();
    消耗时间 = endTime  -  startTime 返回毫秒结果；

    定时器设定的等待时间，当等待时间到了，也不一定立刻执行函数，我们要看主体内容是否执行完成，当主体任务完成后，才可以去等待区域去执行等待的代码函数（js是单线程的）；
    当主任务区域中，遇到死循环，主任务永远不会执行完，所以我们等待区域的代码讲永远不会执行； 
    当主任务完成后，到等待任务中，把到时间的任务执行，如果很多任务都到时间，按照时间执行，谁先到时间先执行谁的任务；

（5）应用定时器实现js动画
第一种动画：不限定运动时间，规定的是步长（每隔多长时间走多远），我们运动元素在现有的位置累加步长来完成动画；
第二种动画：限定动画时间，在规定时间内完成我们动画，

二，边界动画判断：
（1）为了多走一步超过边界，少一步到不了边界，在js中动画中，加上步长来判断，模拟走的这一步超过了边界我们强制赋值到边界；
（2）我们定时器的返回值，不要设置全局作用域，避免全局污染，我们设置到当前元素的自定义属性上；
    var step =10,start,target,ele
   ele.timer = setInterval(function () {
        if (ele.style.left+step >=target) {
            console.log('到达边界');
           clearTimout(ele.timer)
        }
        ele.style.left +=step
    },10)