jquery, time out another jquery function if a user clicks a div?

Question

I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.

<script>        
$(document).ready(function(){
    var animations = [];

    $('.noti_box').each(function(i) {
        animations.push(
           $(this).hide().delay(i * 1000).fadeIn(1500).promise()
        );
    });

    $.when.apply($, animations).done(function () {
        time=setInterval(function(){
        if ( $('.noti_box:visible').length === 0 ) {
            $(".advert").fadeIn("slow");
        } },200);
    });
});
</script>

this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.

However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:

<script>
$('.icons').click(function(){ 
    $('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');

});

</script>

The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.

So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.

Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks

Answer 1

function notiBox(ele){
    this.ele=ele;
    this.ele.hide().fadeIn('slow');
    console.log("I have been born! "+ele);
}
notiBox.prototype={
    constructor:notiBox,
    advert:function(){
        var ele=this.ele;
        this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
    },
    fadeBack:function(){
        var ele=this.ele;
        this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
    },
}

$(document).ready(function(){
    var timeIn=1;
    $('.noti-box').each(function(){
        var self=this;
        this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
        timeIn++;
    });
    $('.icon').click(function(){
        $('.noti-box').notiBox.fadeBack();
    });
});

Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d