带有mousemove事件60 FPS request的Javascript move元素 [英] Javascript move element with mousemove event 60 FPS requestAnimationFrame

问题描述

有！我在使 #drag 元素平滑移动方面遇到问题。

there! i have a problem for getting #drag element moving smoothly.

我看这篇文章： http://www.html5rocks.com/zh-CN/tutorials/speed/animations/ ＃debouncing-mouse-events

它说：移动时 mousemove 事件的问题元素是 mousemove事件触发了太多

it said that : "the problem with mousemove event when moving element was mousemove event fired too much

因此，我尝试使用其方法：使用 requestAnimationFrame + 布尔检查。

so, i try to used their method : using requestAnimationFrame + boolean checking.

看看这个小提琴进行现场操作： https://jsfiddle.net/5f181w9t/

look at this fiddle for live action : https://jsfiddle.net/5f181w9t/

HTML：

<div id="drag">this is draggable</div>

CSS：

#drag {width:100px; height:50px; background-color:red; transform:translate3d(0, 0, 0); }

JS：

var el               = document.getElementById("drag"),
    startPosition    = 0, // start position mousedown event
    currentPosition  = 0, // count current translateX value
    distancePosition = 0, // count distance between "down" & "move" event
    isMouseDown      = false; // check if mouse is down or not 

function mouseDown(e) {
    e.preventDefault(); // reset default behavior
    isMouseDown     = true;
    startPosition   = e.pageX; // get position X
    currentPosition = getTranslateX(); // get current translateX value
    requestAnimationFrame(update); // request 60fps animation
}    

function mouseMove(e) {
    e.preventDefault();
    distancePosition = (e.pageX - startPosition) + currentPosition; // count it!  
}

function mouseUp(e) {
    e.preventDefault();
    isMouseDown = false; // reset mouse is down boolean
}

function getTranslateX() {
   var translateX = parseInt(getComputedStyle(el, null).getPropertyValue("transform").split(",")[4]);

   return translateX; // get translateX value

}

function update() {
    if (isMouseDown) { // check if mouse is down
        requestAnimationFrame(update); // request 60 fps animation
    }
    el.style.transform = "translate3d(" + distancePosition + "px, 0, 0)";
  // move it!
}

el.addEventListener("mousedown", mouseDown);
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", mouseUp);

这是正确的方法吗？

我的代码有什么问题？

谢谢

推荐答案

问题是您在 mouseDown requestAnimationFrame（） >事件监听器。您应该在 mouseMove 事件侦听器中进行所有更新，因为您希望在鼠标移动而不是单击鼠标时更新显示。因此，您应该在 update 函数的 isMouseDown 条件下更新所有变量。我建议按如下所示纠正代码。

The problem is that you are using requestAnimationFrame() in the mouseDown event listener. You should do all you updates in the mouseMove event listener because you want to update your display when the mouse moves not when mouse clicks. Accordingly you should update all your variables under the isMouseDown conditional in the update function. i would suggest correcting the code as follows.

HTML

<div id="drag">this is draggable</div>

CSS

#drag {
width:100px;
height:50px;
background-color:red;
transform:translateX(0);
}

JS

var el               = drag,
    startPosition    = 0, // start position mousedown event
    currentPosition  = 0, // count current translateX value
    distancePosition = 0, // count distance between "down" & "move" event
    isMouseDown      = false, // check if mouse is down or not
    needForRAF       = true;  // to prevent redundant rAF calls

function mouseDown(e) {
  e.preventDefault(); // reset default behavior
  isMouseDown     = true;
  currentPosition = getTranslateX(); // get current translateX value
  startPosition   = e.clientX; // get position X
}    

function mouseMove(e) {
    e.preventDefault();
  distancePosition = (e.clientX - startPosition) + currentPosition; // count it!  
  if (needForRAF && isMouseDown) {
    needForRAF = false;            // no need to call rAF up until next frame
    requestAnimationFrame(update); // request 60fps animation
  }; 
}

function mouseUp(e) {
  e.preventDefault();
  isMouseDown = false; // reset mouse is down boolean
}

function getTranslateX() {
  var translateX = parseInt(getComputedStyle(el, null).getPropertyValue("transform").split(",")[4]);
  return translateX; // get translateX value
}

function update() {
  needForRAF = true; // rAF now consumes the movement instruction so a new one can come
  el.style.transform = "translateX(" + distancePosition + "px)";// move it!
}

el.addEventListener("mousedown", mouseDown);
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", mouseUp);

检查此处

这篇关于带有mousemove事件60 FPS request的Javascript move元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！