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);
            ...
    }
           ...
}

Javascript clearInterval没有清除

1 个答案: