Javascript Drag&删除脚本性能

时间:2015-12-30 15:35:28

标签: javascript animation drag-and-drop mousemove requestanimationframe

我已经在Javascript中编写了一个拖放脚本,我的目标是尽可能提高效率(光标位于抓取的确切位置并且没有滞后峰值)你通常会尝试限制你的移动功能被触发的次数(限制鼠标移动事件),但我尝试了其他一些方法,我不确定它是否真的在做我所做的事情。我期待着。

这就是我处理它的方式;

首先,在mousedown上,requestAnimationFrame循环启动

    var handleMovement = function(){
        self.ele.style.top = self.dragElPos.pageTop+'px';
        self.ele.style.left = self.dragElPos.pageLeft+'px';
        self.animFrame = requestAnimationFrame(handleMovement);
    }

其次,mousemove事件调用此函数

    var setCoordinates = function (e) {
            self.dragElPos.pageTop = (e.pageY-self.dragElPos.innerTop);
            self.dragElPos.pageLeft = (e.pageX-self.dragElPos.innerLeft);
    }

所有这一切都是将位置存储在某个对象中,handleMovement()函数会检索它,并且由于动画循环,元素会被移动。

我期待的行为是requestAnimationFrame正在优化循环以便动画顺利运行,但由于坐标是由其他一些函数设置的,我想知道它是否知道它何时被优化。

它看起来非常流畅,但如果没有进行优化,我宁愿使用鼠标移动限制。

P.S。浏览器兼容性无关紧要。

0 个答案:

没有答案