Javascript clearInterval not clearing

Question

I have the following JS code

$('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');

What I am trying to do is when the user clicks on .task_select, then I bring up the matched results and display it on the screen. Now, the user can either select one of those options, or click outside. If outside, then the matched results should close. If one of the options is selected, then the whole code in the middle runs.

The problem is that the matched results overlays on top of another div that if it is clicked on, something else will happen. When I click on the matched results, then the code registers as clicking on the outside (so the matched selected disappears, and the effect is as though I clicked on the other div that I don't want to click on.

So my solution was to place a timer before the click on the outside is executed. It all works fine, except clearInterval does not clearout the timer!! So the second time I load something, it is as though the timer was not cleared!

WhY?!

Answer 1

You're overriding timeOutTask with a new interval. You can cache the intervals to an array, something like this:

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