Exit popup + setInterval - javascript

I'm trying to create something like Exit Popup but limited to users residing on my page less than 10 seconds. I thought to use setInterval:
var counter = 0;
var myInterval = setInterval(function () {
// count
console.log(counter);
// Clear if more than 10 seconds
if ( 10 < counter ) {
console.log('Stop setInterval');
clearInterval(myInterval);
}
++counter;
}, 1000);
if ( 10 > counter ) {
// Simplified exit popup function
$(window).mouseleave(function() {
console.log('Popup');
clearInterval(myInterval);
});
}
First part of code works, but the second part executes even if counter is greater than 10. Why this is not working as it should?

No need for a counter. Just bind the event at page load, and unbind it after X seconds using a setTimeout:
$(window).bind('mouseleave', exitPopup);
setTimeout(function(){
$(window).unbind('mouseleave', exitPopup);
},10000);
function exitPopup(){
alert('Exit popup');
}
JS Fiddle Demo (3 seconds)
For this demo, make sure to put your cursor in the lower right window right at the beginning, and wait 3 seconds. It should not appear after that. If you don't wait, it'll show the popup.

Related

Click a button 10 times and reload the page

I'm trying to make my code click a button and reload the page in Javascript. The button must be clicked 10 times every .5 seconds. When it's been clicked 10 times, I want the code to reload the page. Here's what I've got:
var rolls = 10
var q = 0
setInterval(
function() {
document.getElementById("roll").click();
q += 1
}, 500);
if (q == rolls) {
location.reload(true)
}
The following solution uses setInterval to click on the button and decreases rolls. If rolls reaches 0, then the page is reloaded. Your mistake was that your code which checked for the value of rolls ran just after the setInterval, earlier than it actually became 0.
var rolls = 10;
setInterval(
function() {
if (!(rolls--)) {
window.location.href = window.location.href;
}
document.getElementById("roll").click();
}, 500);
Try to insert the checking into the setInterval method:
var rolls = 10
var q = 0
setInterval(
function() {
document.getElementById("roll").click();
q += 1
if (q == rolls) {
location.reload(true);
}
}, 500);
you're doing the check just at the time you define the interval, so
if (q == rolls) {
location.reload(true)
}
is being called just once at the start.
put it inside the interval function like this:
setInterval(
function() {
document.getElementById("roll").click();
if (++q >= rolls) location.reload(true)
}, 500);

How to change the interval dynamically when using setInterval

I have this fiddle : https://jsfiddle.net/reko91/stfnzoo4/
Im currently using Javascripts setInterval() to log a string to console.
What I want to do, is in this setInterval function check whether the interval variable has changed, if it has, change the interval in the setInterval function. I can lower the interval variable by 100 (speeding the function up) by a click a button.
Is this possible ?
Someone mentioned this : Changing the interval of SetInterval while it's running
But this is using a counter, so they only run it a certain amount of times. I need to run it for however long, but change how fast the function gets called again.
Here is the code :
var interval = 2000;
setInterval(function() {
interval = getInterval();
console.log('interval')
}, interval);
function getInterval() {
return interval;
}
$('#speedUp').on('click', function() {
interval -= 100;
console.log(interval)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='speedUp'>
speed up
</button>
I would just stop the interval and start a new one with the different timing
var interval = 2000;
var intervalId;
// store in a function so we can call it again
function startInterval(_interval) {
// Store the id of the interval so we can clear it later
intervalId = setInterval(function() {
console.log(_interval);
}, _interval);
}
function getInterval() {
return interval;
}
$('#speedUp').on('click', function() {
interval -= 100;
// clear the existing interval
clearInterval(intervalId);
// just start a new one
startInterval(interval);
console.log(interval)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='speedUp'>
speed up
</button>

I have the JS function that is invoked every 3 minutes by setInterval - how can I invoke it when page loads too?

I have the following script:
var results;
var cursor = 0;
function myFunction () {
$.getJSON('list.php', function(json) {
results = json.result;
cursor = 0;
// Now start printing
printNext();
});
}
function printNext(){
if(cursor == results.length){
// Reset the cursor back to the beginning.
cursor = 0;
}
// Print the key1 in the div.
//$('#device-content-user-text').html(results[cursor].key1);
$('#device-content-user-text').hide('fast', function(){ $('#device-content-user-text').html(results[cursor].key1); $('#device-content-user-text').show('fast'); });
// Set a delay for the current item to stay
// Delay is key2 * 1000 seconds
setTimeout(function(){
printNext();
}, results[cursor].key2 * 1000);
// Advance the cursor.
cursor++;
}
var interval = setInterval(function () {
myFunction();
}, 300000); //make sql query every 5 minutes
and it gets the JSON string from the page list.php and prints the results one by one in a #device-content-user-text div. It is done every five minutes and the timer starts counting time when the user loads the page. How can I invoke this function also on the page load (and then normally every 5 minutes)?
Thanks
Use document.ready() like
$(document).ready(function(){
var interval = setInterval(function () {
myFunction();
}, 300000); //make sql query every 5 minutes
myFunction();
});
Also, if your just calling myFunction inside the anonymous function of setInterval, just pass the function reference itself
$(document).ready(function() {
var interval = setInterval(myFunction, 300000); //make sql query every 5 minutes
myFunction();
});
Update
Depending on what you meant by page 'load', there can be a world of difference between document.ready and load(). If you want to be absolutely sure everything is loaded(including frames, images, etc..) then do
$(window).load(function() {
var interval = setInterval(myFunction, 300000);
myFunction();
});
Otherwise, if it is sufficient that the DOM is ready, just stick with document.ready()
See jQuery - What are differences between $(document).ready and $(window).load?
//Document ready
$(function(){
//call function
myFunction();
//put your interval here
});

Simple javascript loop doesnt work as intended

I want my trigger to activate every 2 seconds, but each time with my value of i.
Like first 3 seconds trigger .slide1, after another 3 seconds .slide2 etc...
Here my code :
setInterval(function () {
for ( var i = 0; i < 5; i++ ) {
$('.slide'+ i).trigger('click');
}
}, 3000)
After 3 seconds it immediately trigger my .slide4 and i was wondering why ?
Try
var slide = 0;
setInterval(function () {
$('.slide'+ (slide++ % 5)).trigger('click');
}, 3000);
The problem with your code is that each time the interval function is called, you execute the loop and trigger the click event for all the slides.

Jquery setTimeout inside a setTimeinterval not working

I have a setinterval that moves bulldozer from the right to the left.
In the jsfiddle below, the setInterval must stop itself after 5 seconds. (used a settimeout and clearinterval for that) but it's not working. Can anyone help me?
http://jsfiddle.net/B5MKj/11/
var gameover;
gameover = setInterval(function () {
setTimeout(function () {
clearInterval(movingbulldozer);
}, 55000);
}, 10);
You had a typo in your fiddle, updated fiddle, if works just fine, but instead of 5000 ms you had 55000ms set for the timeout.
setTimeout(function () {
clearInterval(movingbulldozer);
}, 5000);
In your example, movingbulldozer is undefined. If you're trying to clear the interval, clear the interval with the right reference. In your example, this would be clearInterval(gameover);
The problem with your example is that every 10 ms you're adding a timeout to the DOM which clears the interval.
var timeout, interval, date,
i = 0;
$(document).ready(function() {
interval = setInterval(function() {
date = new Date();
i++;
$('#debug').html('Interval parsed at '+date.getTime()+', interval #'+i);
if (i >= 100) { // According to your example
$('#debug').html('Starting timeout...');
timeout = setTimeout(function() {
$('#debug').html('Timed out');
}, 5000);
clearInterval(interval);
}
}, 10);
});
Check out my example, see if it helps. :)
http://jsfiddle.net/faqq5/

Categories