javascript:在元素删除后停止setInterval
javascript: stop setInterval after element removal
我想在删除包含setInterval
函数的div后自动执行clearInterval
函数,并且此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();
});
ajax 响应data
包含带有间隔 ID 处理程序的 javascript setInterval
函数:
var intervalId = window.setInterval(pics_load, 3000);
我尝试使用Jquery卸载,但同样的问题:
$('#tooltip').unload(function(){
clearInterval(intervalId);
}
我也尝试在 ajax 响应中使用它:
$(window).unload(function(){
clearInterval(intervalId);
}
您是否尝试过使用 $.data
将 intervalId 存储在#element
本身上?
$('#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-
属性保存说明并在可用时重复使用它们 - 请注意,您可能已经预先填充了它们。
我假定的网页
<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框架来帮助你。
这是相同的示例,但现在使用引导工具提示。
在
块外声明intervalId,分配时不要使用var。在设置间隔之前检查间隔 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();
});
相关文章:
- 使用php或javascript从facebook相册URL中删除多余的部分
- RegEx删除空属性?例如,如果(class=“”||class=“”)移除;否则就下课
- 如何删除多行HTML排列中的空白
- node.js:setInterval()正在跳过调用
- 如何从rails中的代码中删除新行( )
- 删除对HTML元素的拖动
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 按顺序添加和删除类
- iframe正在添加标签,需要删除它们
- 如何在HTML输入字段中添加不可删除的后缀
- addData()从最新图表中删除.js 2.1.3-怎么了
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- 删除CKEditor工具栏按钮,但不删除功能
- 删除对象时终止setInterval
- Javascript/Jquery删除和添加'onmouseover'setinterval上的事件
- jQuery 对话框中的 javascript setInterval() 在销毁或删除时不会停止
- javascript:在元素删除后停止setInterval
- 为什么我的代码在第一次 setInterval 调用时删除复选框控件
- 如何将setInterval周期设置为变量并删除等待时间
- Javascript: setInterval在取消对象时没有被删除