gpt4 book ai didi

javascript - 鼠标移动时的空闲事件 - 如何在鼠标移动时永久停止脚本

转载 作者:行者123 更新时间:2023-12-02 23:07:05 25 4
gpt4 key购买 nike

我的代码有问题。我想要实现的目标:

创建循环,其中当用户不移动鼠标/滚动页面等时,div #news-main-page-wrap 淡入和淡出。

当用户开始移动脚本时,无论 #news-main-page-wrap 是否可见,脚本都必须中断。

我已经成功地创建了这个淡入和淡出的循环,但是我无法打破它。

我们试图通过用户 ControlAltDel 进行 .bind 来实现这一点,但它无法正常工作。

我当前的代码是:

jQuery(document).ready(function( $ ){

idleTimer = null;
idleState = false;
idleWait = 20000;

(function ($) {

$(document).ready(function () {

$('*').bind('mousemove keydown scroll', function () {

clearTimeout(idleTimer);

if (idleState == true) {

// Reactivated event


}

idleState = false;

idleTimer = setTimeout(function () {

// Idle Event
$('#news-main-page').removeClass('d-none');
$("#news-main-page-wrap").delay(20000).fadeOut(500);
$("#news-main-page-wrap").delay(20000).fadeIn();
$("#news-main-page-wrap").delay(20000).fadeOut(500);
$("#news-main-page-wrap").delay(20000).fadeIn();
$("#news-main-page-wrap").delay(20000).fadeOut(500);
$("#news-main-page-wrap").delay(20000).fadeIn();
$("#news-main-page-wrap").delay(20000).fadeOut(500);
$("#news-main-page-wrap").delay(20000).fadeIn();

idleState = true; }, idleWait);
});

$("body").trigger("mousemove");
$("body").mousemove(function() {
$("#news-main-page").stop();
});

});
}) (jQuery)

});

我们试图让它与以下代码一起工作:

jQuery(document).ready(function( $ ){
idleTimer = null;
idleState = false;
idleWait = 1000;
(function ($) {

$(document).ready(function () {
var myFunc =
function () {

clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
}

idleState = false;

idleTimer = setTimeout(function () {
// Idle Event
$('#news-main-page').removeClass('d-none');
$("#news-main-page").delay(1500).fadeOut();
$("#news-main-page").delay(1500).fadeIn();
$("#news-main-page").delay(1500).fadeOut();
$("#news-main-page").delay(1500).fadeIn();
$("#news-main-page").delay(1500).fadeOut();

idleState = true; }, idleWait);
};


$("body").mousemove(function() {
$('*').unbind('mousemove keydown scroll',myFunc);
$("#news-main-page").stop();
});
$('*').bind('mousemove keydown scroll',myFunc);

});
}) (jQuery)

});

这是 JS fiddle :

https://jsfiddle.net/2Lrxehz8/

如果有人能帮助我,我将不胜感激。 :)

最佳答案

我想你需要这样的东西:

jQuery(document).ready(function( $ ){

let idleTimer = null,
loopTimer = null,
idleWait = 1000;

(function ($) {

$(document).ready(function () {
//Cache the query
let $animatedElement = $('#news-main-page');

let animateElements = function(){
$animatedElement.delay(1500).fadeOut();
$animatedElement.delay(1500).fadeIn();
};

let myFunc = function () {


clearInterval(loopTimer);
clearTimeout(idleTimer);
$animatedElement.stop(true);


idleTimer = setTimeout(function () {
//Idle Event
//Loop the animation
loopTimer = setInterval(function(){
animateElements();
}, 3000);

//Call animate elements once to prevent additional delay
//from setInterval call
animateElements();

}, idleWait);

};

$('*').bind('mousemove keydown scroll',myFunc);
//Start the idle loop
myFunc();

});
}) (jQuery)

});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}

button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="news-main-page">
<p>Hello World</p>
<button>Change color</button>
</div>

编辑:

要永久停止动画循环,您可以将停止代码移出空闲处理函数,同时取消绑定(bind)“mousemove keydownscroll”事件,以便它们不再触发:

jQuery(document).ready(function( $ ){

let idleTimer = null,
loopTimer = null,
idleWait = 1000;

(function ($) {

$(document).ready(function () {
//Cache the query
let $animatedElement = $('#news-main-page'),
$allElements = $('*');

let animateElements = function(){
$animatedElement.delay(1500).fadeOut();
$animatedElement.delay(1500).fadeIn();
};

let stopAnimationLoop = function() {
clearInterval(loopTimer);
clearTimeout(idleTimer);
$animatedElement.stop(true);
};

let handleUserAction = function() {
$allElements.unbind('mousemove keydown scroll', handleUserAction);
stopAnimationLoop();
};

let myFunc = function () {

idleTimer = setTimeout(function () {
//Idle Event
//Loop the animation
loopTimer = setInterval(function(){
animateElements();
}, 3000);

//Call animate elements once to prevent additional delay
//from setInterval call
animateElements();

}, idleWait);

};

$allElements.bind('mousemove keydown scroll', handleUserAction);
//Start the idle loop
myFunc();

});
}) (jQuery)

});

你可以试试here

关于javascript - 鼠标移动时的空闲事件 - 如何在鼠标移动时永久停止脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57537518/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com