跟蹤鼠標停止

Question

我試圖跟蹤瀏覽器中的鼠標移動，並且如果用戶停止其鼠標0.5秒，執行一些代碼。我在下面的代碼中放置了一個斷點，它在var mousestop = function（evt）行中斷開，然後跳轉到return語句。我錯過了一些簡單的東西嗎爲什麼它不執行POST語句？我以類似的方式跟蹤鼠標點擊，並將其發佈到服務器上。只是沒有鼠標停止。

$.fn.saveStops = function() { 
$(this).bind('mousemove.clickmap', function(evt) { 
    var mousestop = function(evt) { 
      $.post('/heat-save.php', { 
       x:evt.pageX, 
       y:evt.pageY, 
       click:"false", 
       w:window.innerWidth, 
       h:window.innerHeight, 
       l:escape(document.location.pathname) 
      }); 
     }, 
     thread; 

     return function() { 
     clearTimeout(thread); 
     thread = setTimeout(mousestop, 500); 
     }; 

}); 
}; 

Answer 1

在執行mousestop的時候可能未定義嗎？

試試這樣說：

 return function() { 
     clearTimeout(thread); 
     thread = setTimeout(function(){mousestop(evt);}, 500); 
     }; 

---

這裏是我怎麼會重構：

// a closure for good measure... 
(function($){ 
    var mousestop = function(evt){ 
      // I would use GET because POST makes 2 round trips 
      $.get("/heat-save.php", { 
       "x":evt.pageX, 
       "y":evt.pageY, 
       "click":false, 
       "w":window.innerWidth, 
       "h":window.innerHeight, 
       "l":escape(document.location.pathname) 
      }); 
     }, 
     thread = null; 
    $.fn.saveStops = function() { 
     return this.bind("mousemove.clickmap", function(evt) { 
      clearTimeout(thread); 
      thread = setTimeout(function(){mousestop(evt);}, 500); 
     }); 
    }; 
}(jQuery)); 

您可以將事件替換像這樣的Ajax調用：

(new Image).src = "/heat-save.php?x=" + evt.pageX + "&y=" + evt.pageY + "&click=false&w=" + window.innerWidth + "&h=" + window.innerHeight + "&l=" + escape(document.location.pathname; 

POST vs GET

此外，請確保您的服務器發回「204無內容」狀態代碼而不是200，以獲得最快速的響應。