Develop Reference

setTimeout not working properly with ajaxStart

I want to delay the appearance of my loading gif during the execution of an ajax request so that it doesn't show up if the request doesn't last more than a second. Even though the gif shows up without adding a big delay, when I set the value more than 80 in the setTimout function, it just doesn't. What am I missing?
function ajaxLoading()
{
$(document).ajaxStart(function ()
{
ajaxLoadingTimeout = setTimeout(function () {
$('#loading').show();
}, 1000)
});
$(document).ajaxStop(function () {
clearTimeout(ajaxLoadingTimeout);
$('#loading').hide();
});
}

You can try this:
function ajaxLoading()
{
var flag=true;
$(document).ajaxStart(function ()
{
flag=true;
ajaxLoadingTimeout = setTimeout(function () {
if(flag){
$('#loading').show();
}
}, 1000)
});
$(document).ajaxStop(function () {
flag=false;
clearTimeout(ajaxLoadingTimeout);
$('#loading').hide();
});
}

Updated answer based on comment
function ajaxLoading()
{
$('document')
.ajaxStart(function(){
$("#loading").delay(1000).show();
})
.ajaxStop(function(){
$("#loading").hide();
$(this).unbind("ajaxStart");
});
}

ToggleClass not adding Jquery Delay?

I am trying to add a delay to the toggleclass 'slidein' however it doesn't seem to be adding to it.
here is my fiddle
and here is my code;
$(function () {
$(".expand").on("click", function () {
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
$(this).next().children('#slidinghold').delay(5000).toggleClass('slidein');
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});

Try this:
$(this).next().children('#slidinghold').delay(5000).queue(function(){
$(this).toggleClass("slidein").dequeue();
});
Fiddle

use setTimeout instead of delay. Sample :
$(".expand").on("click", function () {
$(".expand").next().children('#slidinghold').removeClass('active-expand');
$(this).next().children('#slidinghold').addClass('active-expand');
setTimeout(function () {
$('.active-expand').next().children('#slidinghold').toggleClass('slidein');
}, 500);
});
demo https://jsfiddle.net/anthonypagaycarbon/v1geqa8e/

as said by jQuery's doc
.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases
So you can use window.setTimeout to achieve this:
$(function() {
function toggleClassDelay(element,class,delay) {
window.setTimeout(function() {
element.toggleClass(class)
},delay);
}
$(".expand").on("click", function() {
var el;
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
el = $(this).next().children('#slidinghold');
toggleClassDelay(el,"slidein",5000)
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});

JavaScript/jQuery tooltip function using "this"?

JSFiddle link: http://jsfiddle.net/lustre/awpnd6L1/1/
Was wondering if there was a way I could create a function in JavaScript, so that I'm not having to copy the mouseenter code each time I need a "More Info" tooltip. Is this even possible?
Below is the JavaScript I'm looking to condense into a function so that I don't have to copy it several times.
jQuery(".bspaMoreInfo").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
jQuery('.bspaMoreInfoText').show(200);
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
jQuery(".bspaMoreInfoText").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
Hope this makes sense x3

You can create custom jQuery plugin for this job. This is the very natural approach in term of handling repetitive code.
$.fn.moreInfo = function() {
return this.each(function() {
var $text = $(this).next();
$(this).mouseenter(function () {
clearTimeout($text.data('timeoutId'));
$text.show(200);
})
.mouseleave(function () {
$text.data('timeoutId', setTimeout(function () {
$text.hide(200);
}, 650));
});
$text.mouseenter(function () {
clearTimeout($text.data('timeoutId'));
}).mouseleave(function() {
$text.data('timeoutId', setTimeout(function () {
$text.hide(200);
}, 650));
});
});
};
jQuery(document).ready(function () {
$(".bspaMoreInfo").moreInfo();
});
Demo: http://jsfiddle.net/awpnd6L1/3/

DEMO
jQuery(document).ready(function(){
jQuery(".bspaMoreInfo").mouseenter(function(){
clearTimeout($(this).next().data('timeoutId'));
$('.bspaMoreInfoText').hide(200);
$(this).next().show(200);
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
$(this).next().hide(200);
}, 650);
$(this).next().data('timeoutId', timeoutId);
});
jQuery(".bspaMoreInfoText").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
});

Something like this ?
function MouseEnter(ctrl) {
clearTimeout($(ctrl).data('timeoutId'));
$(ctrl).show(200);
}
function MouseLeave(ctrl) {
var timeoutId = setTimeout(function(){
$(ctrl).hide(200);
}, 650);
$(ctrl).data('timeoutId', timeoutId);
}
$(".bspaMoreInfo").mouseenter(function () {
MouseEnter($(".bspaMoreInfoText"));
}).mouseleave(function() {
MouseLeave(this);
}));
$(".bspaMoreInfoText").mouseenter(function () {
MouseEnter($(".bspaMoreInfoText"));
}).mouseleave(function() {
MouseLeave($(".bspaMoreInfoText"));
}));

settimeout not getting cleared

What I'm trying to do is, when the page loads a box appears after 3 seconds and if nothing happens, it gets partially hidden after 3 seconds. Now if the cursor enters the box, timeout is cleared and the ad won't be getting hidden as I'm clearing the timeout.
The problem is when the mouse leaves and enters again, the previous timeout is still there. Though I'm trying to clear the timeout but it still hides the box. What can be the problem?
See my code: (JSfiddle link: http://jsfiddle.net/aK9nB/)
var pstimer;
$(document).ready(function(){
setTimeout(function(){
showps();
pstimer = setTimeout(function() {
hideps();
}, 3000);
}, 3000);
});
$('#psclose').on('click', function(){
$('#postsearch-container').hide();
});
$("#postsearch-container").hover(
function () {
console.log("enter");
clearTimeout(pstimer);
console.log("cleartimeout");
showps();
},
function () {
console.log("leave");
clearTimeout(pstimer);
var pstimer = setTimeout(function(){
hideps();
} , 3000);
});
function showps() {
$("#postsearch-container").stop();
$('#postsearch-container').animate({
bottom: '0'
}, 'slow');
}
function hideps() {
$('#postsearch-container').animate({
bottom: '-115'
}, 'slow');
}

$("#postsearch-container").hover(
function () {
console.log("enter");
clearTimeout(pstimer);
console.log("cleartimeout");
showps();
},
function () {
console.log("leave");
clearTimeout(pstimer);
pstimer = setTimeout(function(){ // remove the "var"
hideps();
} , 3000);
}
);

try removing the var in front of pstimer.
function () {
console.log("leave");
clearTimeout(pstimer);
/* var */ pstimer = setTimeout(function(){
hideps();
} , 3000);
}
using var defines a new local-variable that shares the name with your intended pstimer, but is only available within this function call. When the function is complete, the local var is destroyed.

Jquery stop animation on mouseover

A bit of JQuery taken from http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/ which should give a nice old-twitter style notification.
How do I edit the code below to stop the div hiding on a mouseover?
UPDATE: I still want the div to slideup after the mouseover has finished.
$(function () {
var $alert = $('#alert');
if($alert.length) {
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
}, 5000);
$alert.animate({height: $alert.css('line-height') || '50px'}, 200).click(function () {
window.clearTimeout(alerttimer);
$alert.animate({height: '0'}, 200);
});
}
});

If I'm understanding correctly (which I'm probably not), you want something like this:
var alerttimer, alertBox = $('#alert');
function resetTimeout() {
if (alerttimer) {
clearTimeout(alerttimer);
}
alerttimer = setTimeout(function() {
alertBox.trigger('click');
}, 5000);
}
$(function () {
if(alertBox.length) {
resetTimeout();
alertBox.animate({ height: alertBox.css('line-height') || '50px' }, 200).click(function () {
window.clearTimeout(alerttimer);
alertBox.animate({ height: '0px' }, 200);
}).mouseover(function () {
clearTimeout(alerttimer);
}).mouseout(function () {
resetTimeout();
});
}
});
It's important to note that the above is very much untested.