Develop Reference

fail to create function interval to prevent other function run

hello i try to create the function to prevent the other function to run for 10 minutes IF user close the content and refresh the page.
the other function is to show the content when we scroll with 2 argument
first: it will run the function with first argument with no interval, if user click close and refresh. it will run the second argument that give interval
heres my code.
https://jsfiddle.net/8c1ng49a/1/
please look this code
var popUp= document.getElementById("popup");
var closePopUp= document.getElementsByClassName('popup-close');
var halfScreen= document.body.offsetHeight/2;
var showOnce = true;
var delay;
function slideUp(){
popUp.style.maxHeight="400px";
popUp.style.padding="10px 20px";
popUp.style.opacity="1";
if(popUp.className==="closed"){
popUp.className="";
}
}
function slideDown(){
popUp.style.maxHeight="0";
popUp.style.padding="0 20px";
popUp.style.opacity="0";
// add class closed for cache
if(popUp.className===""){
popUp.className="closed";
localStorage.setItem('closed', 'true'); //store state in localStorage
}
}
// start interval
function startDelay() {
delay = setInterval(slideUp, 1000);
}
// clear interval
function clearDelay() {
window.clearTimeout(delay);
}
// check if cache heve class close
window.onload = function() {
var closed = localStorage.getItem('closed');
if(closed === 'true'){
popUp.className="closed";
}
}
// show popup when scroll 50%
window.onscroll = function scroll(ev) {
// first time visited
if ((window.innerHeight+window.scrollY) >= halfScreen && showOnce) {
slideUp();
showOnce = false;
}
//same user mutilple time visited the site
else if((popUp.className==="closed" && window.innerHeight+window.scrollY) >= halfScreen && showOnce ){
startDelay();
showOnce = false;
}
};
// close button when click close
for(var i = 0; i<closePopUp.length; i++){
closePopUp[i].addEventListener('click', function(event) {
slideDown();
});
}
my interval didnt work onthe second argument its fire when i refresh, i dont know why.
but if add startDelay on my first arguments its work. but i need to place the interval on my second argu

When you want to make delay use setTimeout function.
Here is documentation of this function.
setInterval Repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

Countdown and local storage

I don't know very well JavaScript but i must use it in my project.
I need countdown timers which after refresh page don't stop, not cleared and shown all time.
After press button you are redirect to other page, countown start ant button have 'disable value. After countdown time, button automatically must have enable value.
Here is my project: http://licznikii.cba.pl/dopostu/
In my first version everything works well but not after refresh page. Countdowns are cleared.
In my second version I used LocalStorage and it works well to but not much that I won't. After refresh page countowns are hidden. After countdown time button not have automatically enable value but after refreshpage. After refresh page after countdown time everything are showed good.
Please Help

After modifying your second-version it works. I've tested it in all browsers. Sorry for not code-refactoring, but I think you cope with this now :)
<!-- -------------------------------------------------------- SECOND VERSION -->
<script>
$(document).ready(function(){
$('#defaultCountdown3').countdown({until: 0, onTick: highlightLast5});
var teraz = Date.now();
var zapisanyCzas = localStorage.getItem("defaultCountdown3");
if (zapisanyCzas !== null && teraz < +zapisanyCzas) {
var restTime = secDiff(teraz, +zapisanyCzas);
console.log(restTime);
$("#YourButton3").prop('disabled',true);
$('#defaultCountdown3').removeClass('highlight').countdown('option', {until: Math.round(restTime), onExpiry: countdownFinished});
} else {
localStorage.removeItem("defaultCountdown3");
}
function highlightLast5(periods) {
if ($.countdown.periodsToSeconds(periods) === 5) {
$(this).addClass('highlight');
}
}
$('#YourButton3').click(function() {
localStorage.setItem("defaultCountdown3", Date.now() + 60 * 1000);
$('#defaultCountdown3').removeClass('highlight').countdown('option', {until: 60, onExpiry: countdownFinished});
$("#YourButton3").prop('disabled',true)
});
function countdownFinished(){
// Finished - disable your button
localStorage.removeItem("defaultCountdown3");
$("#YourButton3").prop('disabled',false)
}
function secDiff(start, end){
var diff = Math.abs(start-end);
return (diff/1000);
}
});
</script>
<script>
$(document).ready(function(){
$('#defaultCountdown4').countdown({until: 0, onTick: highlightLast5});
var teraz = Date.now();
var zapisanyCzas = localStorage.getItem("defaultCountdown4");
if (zapisanyCzas !== null && teraz < +zapisanyCzas) {
var restTime = secDiff(teraz, +zapisanyCzas);
console.log(restTime);
$("#YourButton4").prop('disabled',true);
$('#defaultCountdown4').removeClass('highlight').countdown('option', {until: Math.round(restTime), onExpiry: countdownFinished});
} else {
localStorage.removeItem("defaultCountdown4");
}
function highlightLast5(periods) {
if ($.countdown.periodsToSeconds(periods) === 5) {
$(this).addClass('highlight');
}
}
$('#YourButton4').click(function() {
localStorage.setItem("defaultCountdown4", Date.now() + 120 * 1000);
$('#defaultCountdown4').removeClass('highlight').countdown('option', {until: 120, onExpiry: countdownFinished});
$("#YourButton4").prop('disabled',true)
});
function countdownFinished(){
// Finished - disable your button
localStorage.removeItem("defaultCountdown4");
$("#YourButton4").prop('disabled',false)
}
function secDiff(start, end){
var diff = Math.abs(start-end);
return (diff/1000);
}
});
</script>

Javascript auto page refresh code

this is the code that comes in head section and it will automatically refresh the whole page in 1 min as i put 6000 in the code below
<script type="text/javascript">
setTimeout('window.location.href=window.location.href;', 6000);
</script>
is there any way for example, when there's 10 seconds left to refresh the page then, a button will display and say "Click here to reset timer" and it will reset that timer to 1 min again?

<script language="javascript">
var timeout,interval
var threshold = 15000;
var secondsleft=threshold;
startschedule();
window.onload = function()
{
startschedule();
}
function startChecking()
{
secondsleft-=1000;
if(secondsleft <= 10000)
{
document.getElementById("clickme").style.display="";
document.getElementById("timercounter").innerHTML = Math.abs((secondsleft/1000))+" secs";
}
}
function startschedule()
{
clearInterval(timeout);
clearInterval(interval);
timeout = setTimeout('window.location.href=window.location.href;', threshold);
secondsleft=threshold;
interval = setInterval(function()
{
startChecking();
},1000)
}
function resetTimer()
{
startschedule();
document.getElementById("clickme").style.display="none";
document.getElementById("timercounter").innerHTML="";
}
</script>
Please wait...<span id="timercounter"></span>
<button id="clickme" style="display:none;" onclick="javascript:resetTimer();">Click here to reset timer</button>

Assuming you have the following html for the button:
<button id="cancel-reload-button" style="display: none" onclick="cancelReload()">Cancel Reload</button>
And this as the script (Note: this gives the idea, but is not neccesarily fully tested):
// Variable for holding the reference to the current timeout
var myTimeout;
// Starts the reload, called when the page is loaded.
function startReload() {
myTimeout = setTimeout(function() {
document.getElementByID("cancel-reload-button").style.display = "inline";
myTimeout = setTimeout(function() {
window.location.reload();
} 10000)
}, 50000);
}
// Cancel the reload and start it over. Called when the button is
// clicked.
function cancelReload() {
clearTimeout(myTimeout)
startReload()
}
// On page load call this function top begin.
startReload();
I created two functions, one for starting the reload and the second one for cancelling it.
Then I assigned the timeout to the variable myTimeout which can be used to later cancel the timeout.
Then I called myTimeout twice - Once for 50 secs, at which point it shows the button and once for 10 secs after which it finally reloads.

How about below? If you click on OK to reset timer, it would keep giving the confirm box every 50 seconds. If you click cancel, it will refresh the page in 10 seconds.
setInterval(function(){ var r = confirm("Reset Timer");
if (r == true) {
setTimeout('window.location.href=window.location.href;', 60000);
} else {
setTimeout('window.location.href=window.location.href;', 10000);
}
}, 50000);
Note: In your question you specified 1 minute, but your code works for 6 seconds(6000 -- > 6 seconds not 60 seconds) I have included for a minute

You can use 2 setTimeout calls, one to make the "Reset" button show up and another one for the refresh timer reset. The trick is to store the second setTimeout on a global variable and use clearTimeout to reset it if the button is pressed.
Here is some JavaScript code to illustrate:
<script type="text/javascript">
var autoRefreshTime = 30 * 1000; // 60000ms = 60secs = 1 min
var warningTime = autoRefreshTime - (10 * 1000); // 10 secs before autoRefreshTime
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
warningTimeout = setTimeout('ShowResetButton();', warningTime);
function ShowResetButton() {
// Code to make the "Reset" button show up
}
// Make this function your button's onClick handler
function ResetAutoRefreshTimer() {
clearTimeout(waitTimeout);
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
}
</script>

The way I would do it is make a function with a timeout, and invoke that function
<script type="text/javascript">
var refreshFunc = function(){
setTimeout(function(){
var r = confirm("Do you want to reset the timer?");
if(r === false){
window.location.href=window.location.href;
}else{
refreshFunc();
}
}, 6000);
};
refreshFunc();
</script>
One big problem with using confirm in this case is you cannot program it to reject. You would have to implement you own modal/dialog box so you can auto reject in 10 seconds.

Try using setInterval():
var time;
$(function() {
time = $('#time');
$('#reset').on('click', reset);
start();
});
var timer, left;
var start = function() {
left = +(time.text()); //parsing
timer = setInterval(function() {
if (0 <= left) {
time.text(left--);
} else {
clearInterval(timer);
location.replace(location);
}
}, 1000);
};
var reset = function() {
if (timer) {
clearInterval(timer);
}
time.text('59');
start();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1><span id='time'>59</span> second(s) left</h1>
<input id='reset' value='Reset' type='button' />

Javascript,auto refresh

i currently am using the below javascript code below,
<script type="text/javascript">
function PrintWindow()
{
window.print();
CheckWindowState();
}
function CheckWindowState()
{
if(document.readyState=="complete")
{
window.close();
}
else
{
setTimeout("CheckWindowState()", 2000)
}
}
PrintWindow();
//window.onfocus = function() { window.close(); }
// Trying to auto refresh the page after 3 seconds of no use.
function setIdle(cb, seconds) {
var timer;
var interval = seconds * 1000;
function refresh() {
clearInterval(timer);
timer = setTimeout(cb, interval);
};
$(document).on('keypress, click', refresh);
refresh();
}
setIdle(function() {
location.href = location.href;
}, 3);
</script>
My original question was how to go home when the print box was finished but was told this was impossible, so i am now wondering how to auto refresh the page after so many seconds have passed, i have added in code to do this but it is not working
i have now managed to fix it, if any one is wondering :
var timer = null;
function goAway() {
clearTimeout(timer);
timer = setTimeout(function() {
window.location = 'http://localhost:8080/fileuploadWithPreview';
}, 5);
}
window.addEventListener('mousemove', goAway, true);
goAway(); // start the first timer off
This when the window is closed takes me to the home page so it is possible to do

Hide download link for 10 seconds? js

hey, how can I have my download link hidden, and make a count down type thing. Maybe have it count down from 10 and once it's done that have the download link appear, it would be best to do it in js right?
does anyone know how to do this? :D
Thanks

Complete example:
<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 10;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>

You can use setInterval for this. setInterval behaves like a timer, where you can run a certain function periodically. Something like this should do the work(untested):
$(".link").hide();
var iteration = 0;
var timer = setInterval(function() {
if(iteration++ >= 10) {
clearTimeout(timer);
$(".link").show();
$(".counter").hide();
}
$(".counter").text(10 - iteration);
}, 1000);
This will initially hide the download link and run a function every second which counts down from 10. When we reaced ten, we hide the counter and show the link. ClearTimeout is used so that we don't count after we reached ten. Easy as dell.
Edit: As mentioned in the comments, this function is using jQuery to find the elements.

Take a look at the setTimeout function. You can do something like:
function displayLink() {
document.getElementById('link_id').style.display = 'block';
}
setTimeout(displayLink, 10000);

var WAIT_FOR_SECONDS = 10;
var DOWNLOAD_BUTTON_ID = "btnDownload";
if (document.body.addEventListener) {
document.body.addEventListener("load", displayDownloadButton, false);
} else {
document.body.onload = displayDownloadButton;
}
function displayDownloadButton(event) {
setTimeout(function() {
_e(DOWNLOAD_BUTTON_ID).style.display = "";
}, WAIT_FOR_SECONDS*1000);
}
function _e(id) {
return document.getElementById(id);
}