我有以下JS代码
$('body').on({
click: function()
{
var el = $(this);
lookUpTask(el);
el.bind('blur', function(){
timeOutTask = setInterval(function(){
if( timeOutTask )
{
clearInterval(timeOutTask);
el.trigger('remove_match');
}
}, 500);
$('body').on({
click: function(event)
{
var match = $(this);
var color = match.attr('color');
// Check color to change brightness
var brightness = hexToLuminance(color);
var text_color = '#000';
if( brightness < 128 ) {
text_color = '#fff';
}
// Change color according to brightness
el.css('color',text_color);
el.parent().parent().children('.remove').css('color',text_color);
el.parent().parent().children('.resize').css('color',text_color);
// Change the background and task name
el.parent().parent().css('background-color', color);
el.val(match.html());
// Update DB
// Remove the task_match
el.trigger('remove_match');
}
},'.match');
});
el.bind('remove_match', function(){
if( el.val == "" ) {
el.val('Select Task');
}
el.css('text-align','center');
el.parent().children('.match_results').remove();
clearInterval(timeOutTask);
});
},
keyup: function(event)
{
lookUpTask($(this));
}
},'.task_select');
我想做的是当用户单击.task_select时，然后显示匹配的结果并将其显示在屏幕上。现在，用户可以选择这些选项之一，也可以单击外部。如果在外面，则匹配的结果应关闭。如果选择了其中一个选项，则中间的整个代码将运行。
问题是，匹配的结果将覆盖在另一个div的顶部，如果单击该div，则会发生其他情况。当我单击匹配的结果时，代码将注册为在外部单击（因此匹配的所选内容消失了，效果就好像我单击了我不想单击的另一个div一样。
因此，我的解决方案是在执行外部单击之前放置一个计时器。一切正常，除了clearInterval不会清除计时器！因此，第二次加载东西时，好像没有清除计时器！
为什么？！
您正在timeOutTask使用新的时间间隔进行覆盖。您可以将时间间隔缓存到数组中，如下所示：
var timeOutTasks = [];
$('body').on({
...
el.bind('blur', function(){
timeOutTasks.push(setInterval(function(){
clearInterval(timeOutTasks.pop());
...
}, 500);
...
}
...
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句