Develop Reference

jQuery: Delay a function from being used again once fired for a set time

I want my function to fire on scroll, but then wait 250ms until it may fire again.
function myFunction() {
console.log('hello');
}
$(window).on('scroll', function() {
myFunction();
});
I have tried a timeout:
$(window).on('scroll', function() {
setTimeout(function() {
myFunction();
}, 250);
});
However this method delays for 250ms before firing the function.

Based on this answer, you can add a flag so that additional events are not fired, then clear that flag using a timeout.
Note that this will lose/drop events within the timeout, so should not be used for something like user keyboard input; where debounce would be more suitable.
var active = false;
$(window).on('scroll', function() {
if (active) return;
active = true;
myFunction();
setTimeout(function() {
active = false;
}, 250);
});
function myFunction() { console.log("scroll"); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style='height:30000px;'>
something to scroll
</div>
This is a basic throttle implementation. Improvements would be to make it modular / namespace'd and/or store the "active" flag on the element itself; so that it the same event can be reused for multiple elements and doesn't create lots of global variables.

Simply call your function once outside of setTimeout.
$(window).on('scroll', function() {
myFunction(); // call once
setTimeout(function() {
myFunction();
}, 250); // repeat call after 250ms
});
Use setInterval instead of setTimeout if you want repeated calls every 250ms.

Set interval works only first time. Is there any solution?

I want to run the function continuously. But it only works first time properly. Is there any solution for working this function continuously?
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
}, 15000);
});

If the code inside the setInterval takes longer than the time you have set it will create another process before the function finishes messing everything up. So choosing setTimeout is actually better.
To make a function loops in setTimeout use a following syntax:
function function1() {
// something here
}
function runner() {
function1();
setTimeout(function() {
runner();
}, time);
}
runner();

Given the comment under the question explaining your goal:
I want to trigger a button to show a div after 15 secs when the page is loaded, and 50 secs later another trigger for closing the div. & I want to run this continuously
I would suggest that you chain setTimeout() calls instead of using setInterval() which will cause the events to overlap and become a mess. I'd also suggest that you call show() and hide() directly on the required elements instead of faking click events in the DOM. Try this:
function openBand() {
$('#yourElement').show();
setTimeout(closeBand, 50000);
}
function closeBand() {
$('#yourElement').hide();
setTimeout(openBand, 15000);
}
$(document).ready(function() {
setTimeout(openBand, 15000);
// or just call closeBand() here directly, if the element starts as hidden
});

You should change your current function with this one
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
}, 15000);
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
});

Using jquery $(this) in a function

Quick Description:
I'm aware that using $(this) in a function won't work because it's not within the right scope. I've also seen other similar questions. I just still can't figure out how to fix my scenerio.
Goal: I'm trying to build a panoramic photo viewer with jQuery. I have it working, but I need multiple instances. So I need to target only the one I'm hovering on.
Code:
jsFiddle: http://jsfiddle.net/kthornbloom/5J3rh/
Simplified Code:
var hoverInterval;
function doStuff() {
/* The next line is the one in question */
$(this).animate({
/* stuff happening */
});
}
$(function() {
$('.pan-wrap').hover(
function() {
/* stuff happening */
hoverInterval = setInterval(doStuff, 250);
},
function() {
clearInterval(hoverInterval);
});
});

You have scope issues, this in the doStuff is window context.
Use proxy()
hoverInterval = setInterval($.proxy(doStuff,this), 250);

You can explicitly pass this into doStuff:
setInterval(function() {
doStuff(this);
}, 250);
And in doStuff you can do:
function doStuff(element) {
...
}
Or you can explicitly set the value of this for doStuff like so:
setInterval(function() {
doStuff.call(this);
}, 250);
Then you can still use $(this) inside doStuff without changing any of its arguments. For more information on call, see Function.prototype.call and its friend Function.prototype.apply.

Jquery fadeTo on mouseover

I am using a plugin called anything slider and am trying to make the controls fade after 4 seconds (which is working) then change opacity back to 1 on mouseover (not working). Here is what I have so far...what am I doing wrong?
$(slider.$controls).mouseover(function()
slider.$controls.fadeTo(400, 1.0);
});
$(function () {
var fadeTime = 400,
fadeDelay = 4000,
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.fadeTo(fadeTime, 0.3);
$('.tooltip').fadeOut(fadeTime);
}, fadeDelay);
};
});

you sould replace every slider.$controls.fadeTo with slider.controls.fadeTo
$(slider.controls).mouseover(function()
$(this).fadeTo(400, 1.0);
});

You have a syntax error on line 2. Where you have
slider.$controls.fadeTo...
you should have
$(this).fadeTo...
because once you've entered the anonymous function on line 1, the this object now refers to the DOM element upon which you're executing this code, which is the element represented by slider.controls.

First you use slider.controls to target the control element(s), then you use slider.$controls to target the same element(s). I think you need to decide which one it is.
Also, inside a callback function you can use this as a reference to the element that has had the event fired on it:
$(slider.controls).bind('mouseover', function () {
$(this)...
});
Otherwise if you want to fade-in-out all the controls at the same time then you just need to figure out if you need to use slider.$controls or slider.controls.
UPDATE
I see you have changed your question and now you are using slider.$controls both times. You should put your mouseover code inside the document.ready event handler so you know the DOM elements are available:
$(function () {
slider.$controls.mouseover(function()
slider.$controls.fadeTo(400, 1.0);
});
var fadeTime = 400,
fadeDelay = 4000,
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.fadeTo(fadeTime, 0.3);
$('.tooltip').fadeOut(fadeTime);
}, fadeDelay);
};
Also I noticed that you wrapped slider.$controls in a jQuery object the first time, but not the second, make sure to do that if slider.$controls is not already a jQuery object (many times developers put a $ as the first character of a variable name to denote that it is a jQuery object).

Problem ordering functions using setTimeout with jQuery

I'm using some jQuery code to create tabs in which the page's content is broken up into (navigable from the top of the tab block) and am looking to do the following when a "next" or "previous" link (placed at the bottom of each tab's content) is clicked:
The page to scroll up to the top of the tab block (successfully implemented using ".scrollTo" plugin) over 750ms
Once scrolled, the tab to change to the corresponding "previous" or "next" tab (identified by a hashtag url) - 250ms later.
Using the following code:
$(".external_link").click(function() {
$.scrollTo(515, 750, {easing:'easeInOutQuad'});
setTimeout(changeTab($(this).attr("href")), 1000);
return false;
});
the two happen at the same time at the mo. If anyone could shed some light on what I'm doing wrong I'd be really appreciative.
The code in full:
$(document).ready(function() {
$(".tab_content").hide();
$("ul.content_tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$('.content_tabs li').each(function(i) {
var thisId = $(this).find("a").attr("href");
thisId = thisId.substring(1,thisId.length) + '_top';
$(this).attr("id",thisId);
});
function changeTab(activeTab) {
$("ul.content_tabs li").removeClass("active");
$(activeTab + '_top').addClass("active");
$(".tab_content").hide();
$(activeTab).fadeIn();
}
//check to see if a tab is called onload
if (location.hash!=""){changeTab(location.hash);}
//if you call the page and want to show a tab other than the first, for instance index.html#tab4
$("ul.content_tabs li").click(function() {
if ($(this).hasClass("active"))
return false;
changeTab($(this).find("a").attr("href"));
return false;
});
$(".external_link").click(function() {
$.scrollTo(515, 750, {easing:'easeInOutQuad'});
setTimeout(changeTab($(this).attr("href")), 1000);
return false;
});
});
Am I right to be attempting to do this with setTimeout? My knowledge is incredibly limited.

setTimeout(changeTab($(this).attr("href")), 1000);
That's the wrong one, you have to put in a function, not the result of executing a function, and 250 ms makes more sense. changeTab is a function, changeTab(argument) is executing a function. So try
var that = $(this);
setTimeout(function() {changeTab(that.attr("href"))}, 250);
I think the reason they execute at the same time is because you call the changeTab-function directly when you set the timeout, and the previous function waits for 750ms before proceding.

You are passing a function call to setTimeout(). You need to pass a function reference. The call will get executed immediately, but a function reference will be executed when the timeout expires. Call setTimeout() like this:
setTimeout(function() { changeTab($(this).attr("href")); }, 1000);
Also, you should consider taking advantage of the onAfter option of the .scrollTo() plugin which indicates a function to be called when the scrolling is completed. It may make more sense to go:
$.scrollTo(515, 750, {
easing: 'easeInOutQuad',
onAfter: function () {
setTimeout(function() { changeTab($(this).attr("href")); }, 250);
}
});