javascript:元素删除后停止 setInterval
-
12-12-2019 - |
题
我想执行 clearInterval
删除包含的 div 后自动运行 setInterval
函数,这个div是ajax响应的结果,因为它在删除div后不会自行停止。
$('#element').mouseover(function(){
$.post('ajax/ajax.php', function(data) {
$('<div id="tooltip'></div>").appendTo("div#main");
$('#tooltip').html(data);
$('#tooltip').show();
});
}).mouseout(function(){
clearInterval(intervalId);
$('#tooltip').empty();
$('#tooltip').remove();
});
阿贾克斯响应 data
包含 javascript setInterval
具有间隔 Id 处理程序的函数:
var intervalId = window.setInterval(pics_load, 3000);
我尝试使用 Jquery卸载 但同样的问题:
$('#tooltip').unload(function(){
clearInterval(intervalId);
}
我也尝试在 ajax 响应中使用它:
$(window).unload(function(){
clearInterval(intervalId);
}
解决方案
您是否尝试过将intervalId存储在 #element
本身使用 $.data
?
$('#element').mouseover(function() {
var $this = $(this);
$.post('ajax/ajax.php', function(data) {
$('<div id="tooltip'></div>").appendTo("div#main");
$('#tooltip').html(data);
$('#tooltip').show();
// save interval id here
var intervalId = setInterval('pics_load', 3000);
$this.data('intervalId', intervalId);
});
}).mouseout(function(){
// retrieve intervalId here
var intervalId = $(this).data('intervalId');
clearInterval(intervalId);
$('#tooltip').empty();
$('#tooltip').remove();
});
其他提示
我仍然对你一般想要做的事情感到困惑......所以我会假设:
- 每当用户超过你的时候
#element
您想要从服务器获取帮助描述,并且用户很快就会删除对该元素的焦点,您想要隐藏帮助描述
女巫听起来很有道理……但是在哪里 setInterval()
到位吗?为什么需要使用这样的方法?您只想在第一次操作时显示它?
作为一名优秀的开发人员,我会这样做:
- 仅在第一次向服务器询问帮助说明,这样一旦服务器上有多个用户,我就可以节省一些负载。
- 使用
data-
属性来保存描述并在可用时重新使用它们 - 笔记 您可以预先填充它们。
我假设的 HTML
<div class="container">
<h1>Stackoverflow</h1>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</div>
作为 jQuery 我会做这样的事情
$(function() {
$("ul li").hover(
function() {
// on mouse over
if($(this).prop("data-tooltip") === undefined) {
// use $.post() and retrieve the tooltip description,
// then place it on data-tooltip property
$.post('ajax/ajax.php', function(data) {
// save for next time
$(this).prop("data-tooltip", data);
// show
tooltip($(this), $(this).prop("data-tooltip"));
});
}
else {
// show saved description
tooltip($(this), $(this).prop("data-tooltip"));
}
},
function() {
// on mouse out
tooltip();
}
);
});
function tooltip(elm, msg) {
if(msg)
$("<span class='tooltip' />").stop().html(msg).appendTo(elm).show();
else
$(".tooltip").hide();
}
作为一个简单的例子,这是一个 JsBin 上的现场演示.
如果你想 要进一步缩小代码,您可以使用 CSS框架 来帮助你。
声明 间隔ID 在块之外,并且分配时不要使用 变量。检查是否 间隔ID 在设置间隔之前仍未使用。
var intervalId=null;
$('#element').mouseover(f unction(){
$.post('ajax/ajax.php', function(data) {
$('<div id="tooltip'></div>").appendTo("div#main");
$('#tooltip').html(data);
$('#tooltip').show();
//somewhere inside this should be:
if (!intervalId) ... //then set the interval
});
}).mouseout(function(){
clearInterval(intervalId);
intervalId=null;
$('#tooltip').empty();
$('#tooltip').remove();
});
不隶属于 StackOverflow