Javascript 有没有办法暂停‘；mousemove’；事件，直到任务完成？

有没有办法暂停

mousemove

事件，直到任务完成

$( document ).bind( 'mousemove', function ( e )
{
    // mousemove: please wait and stop moving
    document.removeEventListener('mousemove');

    // I am the task
    $.ajax( {
        url: '/getData',
        type: 'POST',
        success: function ( result ){}
    } )
    .done(function()
    {
        // I am done, start moving...
        document.addEventListener('mousemove');
    });
} );

我想要的是：

• 已激发mousemove事件，并已停止 一旦它被点燃

• 它内部的函数执行

• 当函数完成执行时， mousemove事件再次启动

• 这样做的目的是暂停鼠标 移动事件直到任务完成或 失败了

---

首先，为什么要将原始DOM/事件访问与jQuery混合使用？不要那样做

要实现您想要的功能，请将您的函数设置为非匿名函数，并使用

$（document.one（'mousemove'，yourFunction））

绑定它-在

done（）

函数的外部和内部

function handleMouseMove(e)
{
    // I am the task
    $.ajax({
        url: '/getData',
        type: 'POST',
        success: function ( result ){}
    })
    .done(function() {
        $(document).one('mousemove', handleMouseMove);
    });
}

$(document).one('mousemove', handleMouseMove);

---

首先，为什么要将原始DOM/事件访问与jQuery混合使用？不要那样做

要实现您想要的功能，请将您的函数设置为非匿名函数，并使用

$（document.one（'mousemove'，yourFunction））

绑定它-在

done（）

函数的外部和内部

function handleMouseMove(e)
{
    // I am the task
    $.ajax({
        url: '/getData',
        type: 'POST',
        success: function ( result ){}
    })
    .done(function() {
        $(document).one('mousemove', handleMouseMove);
    });
}

$(document).one('mousemove', handleMouseMove);

---

使用标志禁用/启用它，如下所示：

$(document).data('enableMyMouseMove',true).bind('mousemove',function (e) {

    if($(document).data('enableMyMouseMove')) {
      $(document).data('enableMyMouseMove',false);
      $.ajax( {
        url: '/getData',
        type: 'POST',
        success: function (result) {},
        complete: function (){ $(document).data('enableMyMouseMove',true); }
      });
    }
});

注意，我已经在ajax调用中将您的“done”函数移动到

complete

eventHandler中，因为imo更干净，但是如果您愿意，可以保留done函数，逻辑是相同的

尽量避免总是绑定/解除绑定事件处理程序，因为这是创建memleaks的一种非常简单的方法，除非您知道自己在做什么，尤其是在ie中

---

原因是ie对js和DOM对象有单独的垃圾收集，如果两者之间存在循环引用，则不会发生垃圾收集。当您绑定EventHandler时，在js和DOM之间创建循环依赖关系非常容易，请使用标志禁用/启用它，如下所示：

$(document).data('enableMyMouseMove',true).bind('mousemove',function (e) {

    if($(document).data('enableMyMouseMove')) {
      $(document).data('enableMyMouseMove',false);
      $.ajax( {
        url: '/getData',
        type: 'POST',
        success: function (result) {},
        complete: function (){ $(document).data('enableMyMouseMove',true); }
      });
    }
});

注意，我已经在ajax调用中将您的“done”函数移动到

complete

eventHandler中，因为imo更干净，但是如果您愿意，可以保留done函数，逻辑是相同的

尽量避免总是绑定/解除绑定事件处理程序，因为这是创建memleaks的一种非常简单的方法，除非您知道自己在做什么，尤其是在ie中

---

原因是ie对js和DOM对象有单独的垃圾收集，如果两者之间存在循环引用，则不会发生垃圾收集。如果任务时间很短，那么在绑定EventHandler时，在js和DOM之间创建循环依赖关系非常容易。 您可以使用bool标志锁定mousemove功能。 这将调用mousemove上的函数，但返回时不做任何操作 直到你松开锁

var moveFlag = true;

$( document ).bind( 'mousemove', function ( e )
{
    if(moveFlag == false)
         return;

    moveFlag = false;

    // I am the task
    $.ajax( {
        url: '/getData',
        type: 'POST',
        success: function ( result ){}
    } )
    .done(function()
    {
        // I am done, start moving...
        moveFlag = true;
    });
} );

---

如果你的任务时间很短。 您可以使用bool标志锁定mousemove功能。 这将调用mousemove上的函数，但返回时不做任何操作 直到你松开锁

var moveFlag = true;

$( document ).bind( 'mousemove', function ( e )
{
    if(moveFlag == false)
         return;

    moveFlag = false;

    // I am the task
    $.ajax( {
        url: '/getData',
        type: 'POST',
        success: function ( result ){}
    } )
    .done(function()
    {
        // I am done, start moving...
        moveFlag = true;
    });
} );

.bind（）

是一个不推荐使用的函数。尝试使用

.on（）

（假设您使用的是jQuery 1.7+）

.bind（）

是一个不推荐使用的函数。尝试使用

.on（）

（假设您使用的是jQuery 1.7+）