js鼠标移动事件优化

js鼠标移动事件

• 在开发过程中mousemove会带来操作的卡顿。比如我之前做的一个节点拖动的功能。当节点比较少的时候拖动还是非常的流畅，但是当节点达到2000-3000个时，拖动就会相当的卡顿甚至是无法操作。
  - 那么mousemove事件为什么效率低下呢？
  - mousemove当鼠标一个像素的时候就会触发事件，那么当我们快速移动的时候，mousemove触发的次数是相当多的，而这么多的触发给我们日常开发是没有必要的。
  - 所以为了提高效率，我这里的一个方法是减少触发的次数，或者说在一定时间内只触发一次。
  - 人可以识别的帧数是有限的，所以在很短的时间内只触发一次也会让人感觉是连贯的，但mousemove触发的次数却极大的减少了。
  - 下面的代码中我选择使用一个定时器，在每次触发mousemove之后，将该事件设置为null，等待一段时间后再设置为move函数。
  - 由于当我们鼠标松开时，有可能正处于Timeout中间，所以在松开时，首先要将定时器停止。

var timeOutId = null;
var move = function(){

      ...

      div.onmousemove = null;
      timeOutId = setTimeout(function(){
            div.onmousemove = move;
      }, 30);
}
div.onmouseup = function(){
      clearTimeout(timeOutId);
      div.onmouseup = div.onmousemove = null;
}