Question

我试图在浏览器中跟踪鼠标移动，如果用户停止鼠标0.5秒，则执行一些代码。我在firebug中的下面的代码中放了一个断点，它在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

执行鼠标停止时可能会导致未定义吗？

试试这样：

      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 No Content”状态代码，而不是200，以便最快速的回复。

跟踪鼠标停止

1 个答案: