Call a function after a certain time Jquery?

Question

I am examining a js file form Bram Jetten:

Notification.fn = Notification.prototype;

function Notification(value, type, tag) {
  this.log(value, type);
  this.element = $('<li><span class="image '+ type +'"></span>' + value + '</li>');
  if(typeof tag !== "undefined") {
    $(this.element).append('<span class="tag">' + tag + '</span>');
  }
  $("#notifications").append(this.element);
  this.show();
}

/**
 * Show notification
 */
Notification.fn.show = function() {
  $(this.element).slideDown(200);
  $(this.element).click(this.hide);
}

/**
 * Hide notification
 */
Notification.fn.hide = function() {  
  $(this).animate({opacity: .01}, 200, function() {
    $(this).slideUp(200, function() {
      $(this).remove();
    });
  });
}

...

I assigned a click event one of my buttons and when I click that button it calls a new notification:

new Notification('Hi', 'success');

When I click that notification it closes as well. However if I dont click it after a certain time I want it close by itself. How can I call that hide function or close it after some time later when it appeared?

Solution 1

var that = this;

setTimeout(function() {   //calls click event after a certain time
   that.element.click();
}, 10000);

that worked for me.

Solution 2

Set a timeout and force the hide.

/**
 * Show notification
 */
Notification.fn.show = function() {
  var self = this;
  $(self.element).slideDown(200)
                 .click(self.hide);

  setTimeout(function() {
    self.hide();
    // 3000 for 3 seconds
  }, 3000)
}

Solution 3

Change lines to

Notification.fn.show = function() {
    var self=this;
    $(this.element).slideDown(200);
    $(this.element).click(this.hide);
    setTimeout(function(){
        self.hide();
    },2000);
}

but you will need an additional internal boolean, so that you cant hide (and therfor destroy) the notification twice.

Notification.fn.hide = function() {
  if (!this.isHidden){  
    var self=this;
    $(this).animate({opacity: .01}, 200, function() {
      $(this).slideUp(200, function() {
        $(this).remove();
        self.isHidden=true;
      });
    });
  }
}

Comments

[kamaci]

I use jQuery 1.6.2 and it gives me error at. if (!(e = a.ownerDocument.defaultView))return b; as a.ownerDocument is undefined after 2 seconds? Sorry for minified version I will fix it.

[japrescott]

well, since I don't know how the portion of code looks that gives you that error, I cant really help. But I'm quite sure, that within the hide function, you would need to say ´ $(this.element).animate({....}) ´

[kamaci]

where do you assign isHidden=true; ?