Как остановить вызов функции Javascript внутри setTimeout после его увольнения?

Question

У меня есть div, который слушает событие «mouseenter» и запускает библиотечную функцию (которую я не могу редактировать) через 5 секунд (реализован с помощью setTimeout).

Однако, если пользователь нажимает на div в течение этих 5 секунд, setTimeout следует отменить, а функция не должна запускаться (реализована с помощью clearTimeout). Щелчок также удалит элемент, на который опирается функция libraryFunction.

В настоящее время у меня есть код ниже:

var timeoutVar; 
$("#mydiv").on("mouseenter", function(event) { 
    timeoutVar = setTimeout(function() { 
     runLibraryFunction(object); 
    }, 5000); 
}); 

$("#mydiv").on("click", function(event) { 
    clearTimeout(timeoutVar); 
    removeObject(object); 
}); 

Это работает по большей части, однако, есть крайний случай, когда DIV нажата только через 5 секунд, и в то время как runLibraryFunction() при выполнении. Поскольку событие «щелчок» удаляет объект, который требуется для функции runLibraryFunction, и это происходит при запуске runLibraryFunction, runLibraryFunction затем выдает ошибку.

Есть ли способ остановить вызов runLibraryFunction() после его увольнения?

Answer 1

Можно добавить свойство объекта при запуске функции библиотеки, тем самым защищая его от удаления, как:

var timeoutVar; 
$("#mydiv").on("mouseenter", function(event) { 
    timeoutVar = setTimeout(function() { 
     object.keepmealive=1; 
     runLibraryFunction(object); 
     if (object) delete object.keepmealive; 
    }, 5000); 
}); 

$("#mydiv").on("click", function(event) { 
    clearTimeout(timeoutVar); 
    if (!object.keepmealive) removeObject(object); 
}); 

Этот подход предполагает, что ваша функция библиотеки каким-то образом позаботится о том, чтобы удалить или сделать все, что необходимо сделать, до object, поэтому после его запуска нет необходимости в функции удаления. Он будет оставаться на месте и будет готов действовать на другом возможном будущем событии.

Answer 2

Tricky, но будет работать

timeoutVar = setTimeout(function() { 
     setTimeout(function(){ 
      if(object) 
      runLibraryFunction(object); 
     },1000); 
    }, 5000); 

Держите же остальное.

или использовать немедленно вызываемые функции

timeoutVar = setTimeout(function() { 
        (function(object){ 
         runLibraryFunction(object); 
        })(object); 
       }, 5000); 

Теперь объект всегда будет доступен

Answer 3

Я бы отвязать событие во время обработки, и перепривязываю его потом с помощью s рекурсивной функции следующим образом:

var timeoutVar; 
var init = function(){ 
    $("#mydiv").on("mouseenter", function(event) { 
    timeoutVar = setTimeout(function() { 
     $("#mydiv").off() 
     runLibraryFunction(object, function(){ 
      init() 
     }); 
    }, 5000); 
    }); 
}; 

$("#mydiv").on("click", function(event) { 
    clearTimeout(timeoutVar); 
    removeObject(object); 
}); 

init();