有关于requsetAnimationFrame 以及做一个简单的轮播

RequestAnimationFrame()

这个方法是关于动画的，详细原因可以阅读相关资料（javascript高级程序设计25章-新兴的API）。

RequestAnimationFrame() 接受一个参数，即在重回屏幕前调用的一个函数（就是动画所执行的函数），这个函数负责改变下一次重新绘制的DOM样式。

循环的方式与setTimeout() 方法一样，全局启动，函数内部调用自身，形成循环。

传入该方法的函数接受一个参数，他是一个时间码，（从1970年一月一日至今的毫秒数--不小啊）表示下一次重新绘制的实际发生时间。

说真的，我不太清楚这个时间有什么用。

然后来贴一个例子：MDN

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var start = null;
var d = document.getElementById('SomeElementYouWantToAnimate');
function step(timestamp) { 
  if (start === null) start = timestamp;
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);

 

然后我想做一个轮播的效果，以前做过一次，结果屎一样的效果，至今未不想改囧。决定重新做一个，并且带小点点可以操控，我就不插入图片了。

贴出我的bug，额是代码：

//强行用这个方法=_=
//上下轮播，原理是移动img的父元素，将更外层的父元素设置为域外隐藏 overflow：hidden；
    var qt=document.querySelector('#qt');
    window.requestAnimationFrame=window.requestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
    var start= null;
    var tt= 0,
            nei,
            wai;
//draw中遇到的问题就是 element.style.top 是一个带单位的字符串，而不是一个数！这一点一定要注意！
    function draw(){
        console.log(parseInt(tt));
        if(parseInt(tt)==-1500){
            qt.style.top=0+'px';
        }else{
          qt.style.top=(parseInt(tt)-300)+'px';
        }
        tt=qt.style.top;
         nei=setTimeout(yc,2000);
    }
    function yc(){
    requestAnimationFrame(draw);
    }
    wai=setTimeout(yc,2000);
//下面是小点点操控，当鼠标移入小点点父元素内时正常轮播，点击对应的小点点停止轮播，显示对应的图片，并且捕捉容器的top值，如果不捕捉就会继续上一次轮播的top继续而不是接着你点击的图片继续
    window.onload=function(){
        var zong=document.querySelector('#zong');
        zong.onclick=function(event){
            console.log(event.target.id);
            switch (event.target.id) {
                case 'id1':
                    clearTimeout(nei);
                    clearTimeout(wai);
                    qt.style.top = 0 + 'px';
                    tt = qt.style.top;
                    break;
                case 'id2':
                    clearTimeout(nei);
                    clearTimeout(wai);
                    qt.style.top = -300 + 'px';
                    tt = qt.style.top;
                    break;
                case 'id3':
                    clearTimeout(nei);
                    clearTimeout(wai);
                    qt.style.top = -600 + 'px';
                    tt = qt.style.top;
                    break;
                case 'id4':
                    clearTimeout(nei);
                    clearTimeout(wai);
                    qt.style.top = -900 + 'px';
                    tt = qt.style.top;
                    break;
                case 'id5':
                    clearTimeout(nei);
                    clearTimeout(wai);
                    qt.style.top = -1200 + 'px';
                    tt = qt.style.top;
                    break;
                case 'id6':
                    clearTimeout(nei);
                    clearTimeout(wai);
                    qt.style.top = -1500 + 'px';
                    tt = qt.style.top;
                    break;
            }
        };
//最后移除点点区域开始正常轮播，重新启动（其实也可以鼠标移除小点点就开始轮播，一般网站上都是这样，不难实现）
        zong.onmouseleave=function(){
            clearTimeout(nei);
            clearTimeout(wai);
            tt=qt.style.top || 0;
            setTimeout(yc,2000);
        }
    }

其实做完了还是比较高兴，虽然很简单。

三秒钟以后感觉不对。

零点五秒后发现，不用RequestAnimationFrame()方法也能做啊！我只不过验证了这个方法里的代码能跑！

*！

收获就是setTimeout（）里面的RequestAnimationFrame()方法会立即执行不会排队。