problèmes de setTimeout / clearTimeout

Question

J'essaie de faire en sorte qu'une page se rende à la page de départ après, par exemple, 10 secondes d'inactivité (l'utilisateur ne clique pas). J'utilise jQuery pour le reste mais le set/clear dans ma fonction de test est du pur javascript.

Dans ma frustration, je me suis retrouvé avec quelque chose comme cette fonction que j'espérais pouvoir appeler à chaque clic sur la page. Le minuteur démarre bien, mais n'est pas remis à zéro lors d'un clic. Si la fonction est appelée 5 fois dans les 10 premières secondes, alors 5 alertes apparaîtront... pas de clearTimeout...

function endAndStartTimer() {
    window.clearTimeout(timer);
    var timer;
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

Quelqu'un a t-il quelques lignes de code qui feront l'affaire ? - Sur n'importe quel clic, arrêter, réinitialiser et démarrer le minuteur. - Lorsque la minuterie atteint par exemple 10 secondes, faites quelque chose.

Answer 1

Exemple pratique d'utilisation de Jquery pour un menu déroulant ! Au survol de la souris sur #IconLoggedinUxExternal affiche la div#ExternalMenuLogin et définit un délai pour cacher la div#ExternalMenuLogin.

Au passage de la souris sur le div#ExternalMenuLogin, il annule le délai d'attente. Lorsque la souris quitte la div#ExternalMenuLogin, le délai d'attente est activé.

L'idée est de toujours invoquer clearTimeout avant de régler le délai, afin d'éviter les doubles appels.

var ExternalMenuLoginTO;
$('#IconLoggedinUxExternal').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
    $("#ExternalMenuLogin").show()
});

$('#IconLoggedinUxExternal').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )    
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,1000
    );
    $("#ExternalMenuLogin").show()
});

$('#ExternalMenuLogin').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
});
$('#ExternalMenuLogin').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,500
    );
});

Answer 2

Cela fonctionne bien. C'est un gestionnaire que j'ai créé pour gérer les événements de mise en attente. Il a des événements pour le maintien, et pour le lâcher.

function onUserHold(element, func, hold, clearfunc) {
    //var holdTime = 0;
    var holdTimeout;

    element.addEventListener('mousedown', function(e) {
        holdTimeout = setTimeout(function() {
            func();
            clearTimeout(holdTimeout);
            holdTime = 0;
        }, hold);
        //alert('UU');
    });

    element.addEventListener('mouseup', clearTime);
    element.addEventListener('mouseout', clearTime);

    function clearTime() {
        clearTimeout(holdTimeout);
        holdTime = 0;
        if(clearfunc) {
            clearfunc();
        }
    }
}

Le paramètre de l'élément est celui que vous tenez. Le paramètre func se déclenche lorsqu'il tient pendant un nombre de millisecondes spécifié par le paramètre hold. Le paramètre clearfunc est facultatif et s'il est donné, il sera déclenché si l'utilisateur lâche ou quitte l'élément. Vous pouvez également effectuer des contournements pour obtenir les fonctionnalités que vous souhaitez. Profitez-en ! :)