2

次の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 をクリックしたときに、一致した結果を表示して画面に表示することです。これで、ユーザーはこれらのオプションのいずれかを選択するか、外側をクリックすることができます。外にある場合、一致した結果は閉じる必要があります。オプションの 1 つを選択すると、途中のコード全体が実行されます。

問題は、一致した結果が別の div の上にオーバーレイされ、それをクリックすると別のことが起こることです。一致した結果をクリックすると、コードは外側をクリックしたものとして登録されます (そのため、一致した選択が消え、クリックしたくない他の div をクリックしたかのようになります。

したがって、私の解決策は、外側のクリックが実行される前にタイマーを配置することでした。clearInterval がタイマーをクリアしないことを除いて、すべて正常に動作します!! そのため、何かを 2 回目にロードすると、タイマーがクリアされていないかのようになります。

どうして？！

4

1 に答える 1

2

timeOutTask新しい間隔でオーバーライドしています。次のように、間隔を配列にキャッシュできます。

var timeOutTasks = [];
$('body').on({
    ...
    el.bind('blur', function(){
        timeOutTasks.push(setInterval(function(){
            clearInterval(timeOutTasks.pop());
                         ...
        }, 500);
            ...
    }
           ...
}
于 2013-07-09T07:05:13.360 に答える