setinterval и clearinterval не работают должным образом

Question

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

var vt; 
    if($("#volume").css('display')=='none'){ 
     $("#volume").show(); 
     vt=setInterval(function(){$("#volume").hide();},5000); 

    } 
    else{ 
     clearInterval(vt); 
     vt=setInterval(function(){$("#volume").hide();},5000); 
    } 

, когда пользователь нажимает на кнопку она не очищает интервал вместо он создает экземпляр для каждого щелчка

Answer 1

Попробуйте это:

if($("#volume").css('display')=='none'){ 
    $("#volume").show(); 
    vt = setTimeout(function(){$("#volume").hide();},5000); 
} 
else{ 
    clearTimeout(vt); 
    vt = setTimeout(function(){$("#volume").hide();},5000); 
} 

Answer 2

Это немного сложное решение, выбранное из библиотеки подчеркивания.

var debounce = function(func, wait, immediate) { 
    var timeout, result; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) { 
       result = func.apply(context, args); 
      } 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) { 
      result = func.apply(context, args); 
     } 
     return result; 
    }; 
}; 


var clickHandler = function(){ 
    $("#volume").hide(); 
} 

var debouncedClickHandler = debounce(clickHandler, 5000); 

$('body').on('click', debouncedClickHandler) //change this line to your click handler 

Теперь вам не нужно делать ничего, clickHandler будет вызвана только после задержки 5 секунд от последнего вызова debouncedClickHandler