Settimeout/Cleartimeout Problems

setTimeout / clearTimeout problems

You need to declare timer outside the function. Otherwise, you get a brand new variable on each function invocation.

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

Angular 6 setTimeout and clearTimeout error

You're using angular6+, so I suggest you to use reactive programming library such as rxjs

I made you a small example here.

setTimeout / clearTimeout issues, doesn't appear to reset

There are all sorts of problems with this code:

1. You are adding event handlers inside the .mouseover() event. That means that every time there's a mouseover event, you add yet another set of event handlers. These will pile up and make a real mess when the ALL execute. You need one and only one set of event handlers for each active object.

2. Your whole logic for how this should work seems flawed. You want a menu to stay dropped down as long as the mouse is over an item. The mouseover event happens only when the mouse first moves onto an item. You don't have any way to keep the menu down when the mouse is hovered over it as you just seem to blindly hide it 2 seconds after showing regardless of whether the mouse is still there or not.

3. You are using an implicit global variable for your timer. This creates a bunch of problems. First off, if there is more than one .headermenushow object, each object's timer will step on the others. Second off implicit global variables are just bad and can easily lead to bugs. Declare it exlicitly in the scope you want it in.

4. You can timers on top of timers. Anytime you save a timer to a shared variable, you must either check for a previous timer that is already running or stop any previous timer before you overwrite it's variable. This prevents losing track of a timer that is running and prevents stacking up multiple timers all trying to do the same thing.

We could probably help you come up with much better code, but we'd need to see your actual HTML and understand better what exactly the behavior is that you're trying to implement.

FYI, you may also want to review the CSS :hover selector that will let you show/hide things upon hover without any JS code at all. Since I don't know what your HTML looks like, I can't say for sure if this would work for you, but it is used by many menuing systems is is really simple when done right.

---

Now that you've revealed your HTML, here's a version that works. I must say that a lot of this javascript is because your HTML doesn't make this as easy as it could be.

$(document).ready(function() {
    $(".headermenushow").hover(function() {
        // hide any previous dropdown menus
        $(".dropmenu").hide();

        var self = $(this);
        var timer = self.data("timer");

        // show the dropdown menu for this item
        self.next().show();

        // clear any previous timer for this menu
        if (timer) {
            clearTimeout(timer);
            self.data("timer", null);
        }

    }, function() {
        // hide only on a delay so that user can move
        // to the menu
        var self = $(this);
        var menu = self.next();
        var timer = self.data("timer");
        // clear any previous timer that might have been active
        if (timer) clearTimeout(timer);
        timer = setTimeout(function() {
            self.data("timer", null);
            // if mouse is not over the menu, then hide it
            if (!menu.data("hover")) {
                menu.hide();
            }
        }, 500);
        self.data("timer", timer);

    });

    // keep track of hover state on the menu
    $(".dropmenu").hover(function() {
        $(this).data("hover", true);
    }, function() {
        $(this).data("hover", false);
        $(this).hide();
    });
});

Working demo: http://jsfiddle.net/jfriend00/YJu6Q/

javascript - setTimeout and clearTimeout issue

You've got a definite order-or-operations problem going on here (among other things):

    var toggleEditPanelTimeout;                //value set to 'undefined'; happens first

    // resets timeout function
    function resetEditPanelTimeout() {
        clearTimeout(toggleEditPanelTimeout);  //still undefined; happens third
    }
    resetEditPanelTimeout();                   //value *still* undefined; happens second

    // declares what this is and toggles active class
    //...

    //the value is assigned when this happens; happens fourth:
    toggleEditPanelTimeout = setTimeout(toggleEditPanelTimeoutFired($this), 2000);

As a quick fix, you can simply make the variable global, and revise the code along the lines of:

    clearTimeout(window.toggleEditPanelTimeout);  //clear the previous timeout 

    // declares what this is and toggles active class
    //...

    //schedule a new timeout
    window.toggleEditPanelTimeout = setTimeout(toggleEditPanelTimeoutFired($this), 2000);

You'll also likely want to remove that intermediate toggleEditPanelTimeoutFired(thisLinkClicked) function that you're using in order to get the code fully working. For instance:

    //schedule a new timeout
    var theLink = $(this);
    window.toggleEditPanelTimeout = setTimeout(function(){
        $(theLink).parent().find('.edit-panel').removeClass('active');
        $(theLink).removeClass('active');
    }, 2000);

---

Related Topics