刷新网页不起作用后停用鼠标移动事件

Question

我正在使用jQuerymousemove事件来跟踪鼠标活动。

出于测试目的，我在开发人员控制台中调用startActivityTracker()。当鼠标移动时，会调用onActivity()。然后我运行stopActivityTracker()，并且不再调用onActivity()。到目前为止，这一切都有效。

但当调用startActivityTracker()后刷新网站时(例如F5(，stopActivityTracker()没有任何作用。换句话说，onActivity()仍在被调用。刷新页面时是否有引用丢失？

function onActivity() {
console.log('onActivity: ' + Math.random()) ;    
}
function startActivityTracker() {
$(document).ready(function () {
console.log('Tracker started.');
$(document).mousemove(onActivity);        
});
}
function stopActivityTracker() {
console.log('Tracker stopped.');
$(document).off('mousemove', onActivity);
}

Answer 1

尝试更改函数

function stopActivityTracker() {
console.log('Tracker stopped.');
$(document).off('mousemove');
}

Answer 2

在startActivityTracker函数中运行：

$(document).ready(function () {

根据文件：

.ready((方法提供了一种在页面的文档对象模型(DOM(变得可以安全操作。

相反，在stopActivityTracker中，您不等待就绪事件，因此在附加mousemove事件之前执行.off((方法：

$(document).mousemove(onActivity)

为了解决此问题，您需要将stopActivityTracker更改为：

function stopActivityTracker() {
$(document).ready(function () {
console.log('Tracker stopped.');
$(document).off('mousemove', onActivity);
});
}

它在开发人员控制台中工作，因为dom已经就绪。

完整代码：

function onActivity() {
console.log('onActivity: ' + Math.random());
}
function startActivityTracker() {
$(document).ready(function () {
console.log('Tracker started.');
$(document).mousemove(onActivity);
});
}
function stopActivityTracker() {
$(document).ready(function () {
console.log('Tracker stopped.');
$(document).off('mousemove', onActivity);
});
}

$( document ).ready(function () {
startActivityTracker();
stopActivityTracker();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在任何情况下，我都建议您从函数中删除就绪事件处理程序，并在全局就绪事件处理器中调用它们：

function onActivity() {
console.log('onActivity: ' + Math.random());
}
function startActivityTracker() {
console.log('Tracker started.');
$(document).mousemove(onActivity);
}
function stopActivityTracker() {
console.log('Tracker stopped.');
$(document).off('mousemove', onActivity);
}

$( document ).ready(function () {
startActivityTracker();
stopActivityTracker();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

为了获得stopActivityTracker在startActivityTracker之前运行的证据，在第一次调用后停止onActivity函数就足够了：

var onlyFirstTime = true;
function onActivity(e) {
if (onlyFirstTime) {
onlyFirstTime = false;
console.log('onActivity: ' + Math.random()) ;
}
}
function startActivityTracker() {
$(document).ready(function () {
console.log('Tracker started.');
$(document).mousemove(onActivity);
});
}
function stopActivityTracker() {
console.log('Tracker stopped.');
$(document).off('mousemove', onActivity);
}
startActivityTracker();
stopActivityTracker();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

https://jsfiddle.net/pxhs9qer/

JS:

(function($) {
$(document).ready(function() {
function onActivity() {
$('#log').text('onActivity: ' + Math.random());
}
function startActivityTracker() {
$('#status').text('on');
$(document).on('mousemove', onActivity);
}
function stopActivityTracker() {
$('#status').text('off');
$(document).off('mousemove', onActivity);
}
$('#btn').on('change', function() {
if (this.checked) {
startActivityTracker();
} else {
stopActivityTracker();
}
});
});
})(jQuery);

将整个脚本封装在$(document(.ready((中，并使用on和off