Уникальный таймер setTimeout для каждого элемента?

Question

Я пытаюсь создать меню, в котором есть элементы, показанные в виде обычного текста, и когда вы наводите на них курсор, появляются поля, открытые для редактирования обычного текста.

Вы можете увидеть пример здесь: http://jsfiddle.net/Bx7vX/9/

переменная таймера объявлена ​​глобально, поэтому при наведении на второй элемент списка очень быстро, он сбрасывает таймер для предыдущего элемента. Однако, когда я объявляю таймер внутри функции (см. Здесь: http://jsfiddle.net/JYavJ/), несколько элементов будут исчезать правильно, но когда вы наведете элемент и затем снова включите его, он не очистит таймер правильно.

Так что в основном у меня проблема с сохранением переменной таймера, сохраняющейся между зависаниями на одном элементе. Я попытался добавить переменную таймера в элемент DOM без успеха. Если кто-то знает, как решить эту проблему, или, может быть, лучший способ полностью подойти к этому стилю меню, я бы очень этому признателен. Благодаря!

Для справки, вот код с таймером объявленной вне функции парения:

$('.diet_draggable').hover(function() { 
var timer; 
var current = $(this); 

if (current.is(':hover')){ 
    clearTimeout(timer); 
    $(this).children(".static_units").hide(); 
    $(this).children(".mod_units").show(); 
} 

else if (current.children('.mod_units').children('.list_amount').is(":focus")) { 
    current.children('.mod_units').children('.list_amount').blur(function() { 
     timer = setTimeout(function() { 
      current.children(".mod_units").fadeOut(300); 
      current.children(".static_units").fadeIn(300); 
     }, 500); 
     if (current.is(':hover')) clearTimeout(timer); 
    }); 
} 
else { 
    timer = setTimeout(function() { 
     current.children(".mod_units").fadeOut(300); 
     current.children(".static_units").fadeIn(300); 
    }, 500); 
} 
}); 

Answer 1

Вот, эта версия гораздо проще, но работает точно так, как вы хотите:

var dietDraggable = function(element) { 
var timer = null; 

element.hover(function() { 
    clearTimeout(timer); 
    $(this).children(".static_units").hide(); 
    $(this).children(".mod_units").show(); 
}, function() { 
    timer = setTimeout(function() { 
     element.children(".mod_units").fadeOut(300); 
     element.children(".static_units").fadeIn(300); 
    }, 500); 
}); 

};

$ ('. Diet_draggable'). Each (function() { dietDraggable ($ (this)); });

Ключ в том, что я использую оба параметра функции наведения jQuery. Второй параметр - это то, что происходит, когда вы нападаете на элемент, о котором идет речь. Другая ключевая вещь заключается в том, что я объявляю таймер внутри функции dietDraggable. Это гарантирует, что для каждого из элементов создается замыкание, и поэтому каждый из них имеет свой собственный таймер.

Чтобы увидеть его в действии: http://jsfiddle.net/VjHcr/2/