Javascript clearInterval 未清除

Question

我有以下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一样。

所以我的解决方案是在执行外部点击之前放置一个计时器。一切正常，除了 clearInterval 不清除计时器！所以我第二次加载的时候，就好像定时器没有清零一样！

为什么？！

Answer 1

您正在使用新的间隔覆盖 timeOutTask。您可以将间隔缓存到数组中，如下所示：

var timeOutTasks = [];
$('body').on({
    ...
    el.bind('blur', function(){
        timeOutTasks.push(setInterval(function(){
            clearInterval(timeOutTasks.pop());
                         ...
        }, 500);
            ...
    }
           ...
}