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;
}