Execute a function every 30 seconds jquery mobile? - javascript

I have a jquery mobile phonegap application. I would like to execute a function every 30 seconds the user stays on a particular page.
If the user stays on a particular page say page1 , i would like to execute a function every 30 seconds,
To put it in simpler words
If active page is page1
fire getmessages() every 30 seconds.
How do i achieve this

USE settimeinterval
Check this DEMO
<div id="div2>
<input type="text" name="divText" value="q3"/>
</div>
setInterval(function() {
alert('HI')
}, 30000);
Time is in ms (1000= 1 sec)

If you're using jQuery Mobile 1.4, you need to listen to pagecontainershow and pagecontainerhide events in order to execute functions with interval based on page id.
Retrieve page's id on those events then use switch / case to execute functions as well as clearInterval when page is hidden.
/* setInterval function's name */
var interval;
/* 1) On page show, retrieve page's ID and run checkPage()
2) On page hide, clearInterval() */
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
checkPage(activePage);
}).on("pagecontainerhide", function () {
clearInterval(interval);
});
/* Run function(s) based on page's ID */
function checkPage(page) {
switch (page) {
case "p1":
interval = setInterval(function () {
/* function(s) */
}, 30000);
break;
case "p2":
interval = setInterval(function () {
/* function(s) */
}, 30000);
break;
}
}
Demo

You can setInterval.
Code:
$(document).ready(function(){
function myFunction()
{
setInterval(function(){alert("Hello")},3000);
}
$('#click').click(function(){
myFunction()
})
})
HTML:
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<p>After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever...</p>
<button id="click">Try it</button>
Replace 3000(3 sec) --> 30000 (30 sec) for your requirement.
Demo link http://jsfiddle.net/dhana36/2c4ps/

Working Fiddle
Reference Link
setInterval(function() {
// Do something every 30 seconds
}, 30000);

Related

How do I trigger a javascript function if body is clicked after certain seconds?

I need to trigger a window.open function on the click of body, but only if the click is after few seconds.
EXAMPLE:- if the second click is done immediately, it shouldn't open the window. but after 5 seconds, if the click is made, the window should open.
My code isn't working.
<script>
setInterval(myadFunction,5000);
function myadFunction()
{
$("body").click(function () {
window.open("https://www.google.com");
});
}
</script>
This is a wordpress website., and I entered this code before <body> tag.
Why isn't it working?
You can use a flag to simulate what you want. In this case "canClick" flag will do the job for you.Reset it back to true after your desired timeout.
var canClick = true;
$("body").click(function () {
if (canClick) {
window.open("https://www.google.com");
canClick = false;
setTimeout(() => {
canClick = true
}, 5000);
}
});
Let me know if you face any issue with this snippet.
You could try something like:
<button onclick="timeFunction()">Submit</button>
<script>
function timeFunction() {
setTimeout(function(){ window.open("https://www.google.com"); }, 5000);
}
</script>
It consists of this:
setTimeout(functionname, milliseconds, arg1, arg2, arg3...)
The following are the parameters −
functionname − The function name for the function to be executed.
milliseconds − The number of milliseconds.
arg1, arg2, arg3: These are the arguments passed to the function.
First of all. You should make sure that you are placing the code in the right place. Since it's Wordpress. That bugger really get on my nerves. Try putting it in the active theme.
var click_allowed = 0; //global var (you use const if supported)
setTimeout(function(){ click_allowed = 1; },5000);
jQuery('body').click(function(){
if(click_allowed) window.open("https://www.google.com");
});
jQuery has been used instead of $ for the selectors due to wordpress native jquery limitation.
you can use settimeout(function, millisecond)

JavaScript long click auto

I have trouble adding a long drop to an item on the page
I have a div and I need to set a long click with time outside auto as a human
I want is like element.click() but with a long timeout... Can you help me with example code?
<div>my div</div>
$('div').mousedown(function(){}
Suppose you want to abort the operation if mousedown event lasts less then, for example, 500 milliseconds? Here it is:
let timerId;
$('div').mousedown(function(){
timerId = setTimeout( function() {alert("hi!"); }, 500);
});
$('div').mouseup( function () {
clearTimeout(timerId);
});
set duration for 1 second 1000ms
var pressTimer;
$("div").mousedown(function(){
// Set timeout
pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
}).mouseup(function(){
// clear timeout
clearTimeout(pressTimer);
});

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);
});

jQuery Preloader with min-time

Heyo,
I was wondering if there would be a way to set a min-time to an onload function so that the div is shown min 2sec. Basicly the same as with min-width or min-height. If the site is taking longer than 2sec to load, the div will still be shown untill the site is fully loaded but when the site takes less than 2sec to load the div will still be displayed for a minimum of 2sec.
Here is my current code:
$(window).on('load', function() {
$('.preloader').delay(350).fadeOut('slow');
});
Try this:
$(window).on('load', function() {
setTimeout( function(){
$('.preloader').fadeOut('slow');
}, 2000 )
});
So I take it you want a function to be run when either: the page loads or after 2 seconds, whatever comes later.
First, define a function to be called:
function load_func() {
$('.preloader').delay(350).fadeOut('slow');
}
Then, let's define a way to call the function in either situation:
var pageLoaded = false;
var timeoutElapsed = false;
$(window).on('load', function() {
pageLoaded = true;
if (timeoutElapsed) {
load_func();
}
});
setTimeout(function() {
timeoutElapsed = true;
if (pageLoaded) {
load_func();
}
}, 2000);
This way, if the page loads before 2 seconds, it will wait the timeout to call the function.
Otherwise, if the page loads after 2 seconds, it will call it whenever that load event happened.

Javascript in head tag of master page

I have placed the following script in the head tag of my asp.net master page.
What this script is suppose to do re-direct to the Timeout.aspx page after specific inactive time has elapsed.
If the user scrolls / clicks on the page, then the time is reset. On running the page I get an error:
Jscript engine runtime error: object expected.
Code:
var wintimeout;
function SetWinTimeout() {
wintimeout = window.setTimeout("window.location.href='../Timeout.aspx';",
60000); //after 5 mins i.e. 5 * 60 * 1000
}
$('body').click(function () {
window.clearTimeout(wintimeout);
//when user clicks remove timeout and reset it
SetWinTimeout();
});
window.onload = SetWinTimeout;
You need to change the call of setTimeOut
Change
function SetWinTimeout() {
wintimeout = window.setTimeout("window.location.href='../Timeout.aspx';",
60000); //after 5 mins i.e. 5 * 60 * 1000
}
To
function SetWinTimeout() {
wintimeout = window.setTimeout(function(){
window.location.href='../Timeout.aspx';
}, 60000);
}
If this is not an error because JQuery is not loaded, try the following to run the whole script after the page (and JQuery for that matter) has been loaded:
$(function()
{
$('body').click(function () {
window.clearTimeout(wintimeout);
//when user clicks remove timeout and reset it
SetWinTimeout();
});
SetWinTimeout();
});

Categories

Resources