How can I clear the timeout jQuery function from a different view on Ajax?

Question

This is my jQuery:

var timer, myDiv = $('#mydiv');
$(document).on('mousemove', function(ev) {
    var _self = $(ev.target);

    clearTimeout(timer);

    if (_self.attr('id') === 'mydiv' || _self.parents('#mydiv').length) {
        return;
    }    

    if(!myDiv.hasClass('show')) {
       myDiv.fadeIn();
    }          

    timer = setTimeout(function() { 
        myDiv.fadeOut(1000, function() {
            myDiv.removeClass('show');
        });
    }, 1960);    
});

I need to stop it on loading a different view (I'm on Ajax).

So for the purpose, in another view I used this code:

$(document).ready(function() {    
  clearTimeout(timer); 
});

It's not working, what's the possible reason?

Update

This is my try under your suggestion, however it doesn't work, the #mydiv has become intermittent:

<iframe  id="divFrame" src="http://my/frame.com/" seamless="seamless" scrolling="no"  frameBorder="0" hspace="0" vspace="0" style="width: 100%;height: 100%;border:0;overflow: hidden;"></iframe>
<script>
$(document).ready(function() {
    var timer, myDiv = $('#mydiv');
    $(document).on('mousemove', function (ev) {
        MouseOver(ev, false);
    });

function MouseOver(ev, isFrame) {
    var _self = $(ev.target);
    console.log(_self);

    clearTimeout(timer);

    if (_self.attr('id') === 'mydiv' || _self.parents('#mydiv').length) {
        return;
    }

    if (!myDiv.hasClass('show')) {
        myDiv.fadeIn();
    }

    window.timer = setTimeout(function () {
        myDiv.fadeOut(1000, function () {
            myDiv.removeClass('show');
        });
    }, 1960);
}

$(window).on('message', function (m) {
    console.log(m.originalEvent.data);
    var e = jQuery.Event("mousemove", {
        target: $('#divFrame').get(0)
    });
    MouseOver(e, true);
});


var frame = document.getElementById('divFrame');

});
</script>

Try this : http://stackoverflow.com/questions/8860188/is-there-a-way-to-clear-all-time-outs — Lakhan, Apr 23 '15 at 11:45

score 0 · Answer 1 · answered Apr 23 '15 at 09:57

0

Is your first piece of code is inside a DOM ready handler?

If so timer is not a global var. Use window.timer instead (preferably with a unique name that will not clash):

window.mytimer = setTimeout(function() { 
    myDiv.fadeOut(1000, function() {
        myDiv.removeClass('show');
    });
}, 1960);

and

$(document).ready(function() {    
  clearTimeout(window.mytimer); 
});

window is the default global scope for variables. The alternative is to remove var, but I find that a little ambiguous.

answered Apr 23 '15 at 09:57

iCollect.it Ltd

92,391
25
181
202

@Simone: You need to provide more detail about the different "views" and how they are loaded. `$(document).ready()` however may not fire on a dynamically loaded page (depending on how you loaded it). – iCollect.it Ltd Apr 23 '15 at 10:09
I'm working on it...the problem is that if I place this function inside the ready DOM, the `#mydiv` becomes intermittent. This is the [link](http://stackoverflow.com/questions/29680046/how-can-i-pause-a-jquery-on-mouse-hover-iframe-object) of the main jQuery I provided. – NineCattoRules Apr 23 '15 at 10:16
@Simone: If anything placing the code inside DOM ready should make `#mydiv` *more* reliable. I think you need to show your entire pages as something else is going on here (I mean HTML/Script as saved from the browser, not source code) :) – iCollect.it Ltd Apr 23 '15 at 10:19
I just update the question. I tried many different solution, but no way – NineCattoRules Apr 23 '15 at 10:39
about the `mydiv`, it's a simple `div` over the `iFrame` loaded in my template – NineCattoRules Apr 23 '15 at 10:50
Saw your update. Where is the second view loaded? (the one that tries to stop the timer?) – iCollect.it Ltd Apr 23 '15 at 10:51
In the same folder, I'm on CodeIgniter so it's on my view folder – NineCattoRules Apr 23 '15 at 10:55
Could you explain more this: "The alternative is to remove `var`"? Thanks – NineCattoRules Apr 23 '15 at 11:03
1

@SImon: A variable without `var` assumes the global namespace. e.g. `blah = 1` is the same as `window.blah = 1`, but `var blah = 1` in a function will declare a locally scoped variable. That is all beside the point as you seem to have a more serious problem than just the scope of the variable. – iCollect.it Ltd Apr 23 '15 at 11:10

How can I clear the timeout jQuery function from a different view on Ajax?

1 Answers1