Change interval in Setinterval - javascript

I'm new to jQuery, I wanted to change the interval in Setinterval every time it gets executed. But in my code it's executed every 1 sec and not incrementing at all
Here's my code,
<script>
var time=1000;
function myFunction() {
setInterval(function(){ alert("Hello"); }, time);
time=time+4000;
}
</script>
I think I'm getting this concept wrong, any help with brief explanation where I'm doing wrong will be helpful

setInterval is called till its stopped.
What you should use if you want variable timer is setTimeout.
<script>
var time=1000;
function myFunction() {
setTimeout(function(){ alert("Hello"); myFunction() }, time);
time=time+4000; // seconds
}
</script>

Related

How to refresh a script after some time using Javascript

There is a variable I want to update every minute.
So am curious whether there is a way in Javascript where I can refresh the whole script after some time instead of the variable itself.
<script>
function vName(){
videos = $('#videos').text();
}
vName();
Use setInterval. Here hello will print each and every 3sec
setInterval(function(){ console.log("Hello"); }, 3000);
You could achive this using an event to listen to the element's change:
(function () {
"use strict";
let videos = '';
$("#videos").on("change", evt => {
videos = $(evt.target).val();
console.log(videos);
});
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="videos" type="text">
Solution
Set interval is a function which is being used to perform any functionality after a specific desired time span . The function is always called again and again after that time period . The below code is an example for setInterval.
Code:-
setInterval(function(){ alert("Video is here "); }, 9000);
Explanation
you can call any method in place of "alert("Video is here")" and the desired time period is being given in place of "9000" that means the specific function is being called after every 9 seconds
You can put your code in setInterval() function, like this
setInterval(()=>{
//your script here
function vName(){
videos = $('#videos').text();
}
vName();
}, 60000);

clearInterval doesn't work if is in click jquery event?

I want to use clearInterval but I don't know why doesn't work.
var orologio_real; //global variable
$(document).ready(function(){
orologio(1);
$('#change-time').on('click', function(){
clearInterval(orologio_real);
orologio(0);
});
});
function orologio (arg){
orologio_real= setInterval(function(){
alert(arg)
}, 1000);
}
What I don't understand is why if I click on div, clearInterval doesn't work
I think it is a silly mistake. You are setting the time interval all over again inside the click handler. I commented it out, and increased the interval a little so that you get time to click the button
var orologio_real; //global variable
$(document).ready(function(){
orologio(1);
$('#change-time').on('click', function(){
clearInterval(orologio_real);
//orologio(0); //this was the issue
});
});
function orologio (arg){
orologio_real= setInterval(function(){
console.log(arg);
alert(arg);
}, 3000);
}

Javascript - setTimeout/setInterval execute countdown before the function

I have a timer which triggers a function each 3 seconds using setTimeout or setInterval. The point is that I need to execute the countdown before the function instead of execute the function first and then the timer.
This is the code:
var timer;
document.getElementById('myBtn').addEventListener('mousedown', function (){
timer = setInterval(alert("Ey, release the button!"), 3000);
});
And this should be the order of actions:
Click and hold the button.
Start the countdown ...3, 2, 1...
Trigger the function.
You could trigger another function at the end of the timer. Since you only need to call it once.. You could just use setTimeout
document.getElementById('myBtn').addEventListener('mousedown', function (){
alert("Ey, release the button!")
setTimeout(fireMe, 3000);
});
function fireMe() {
// Boom
}
You might also want to add clearTimeout on mouseup event.
Do something like
var timer;
document.getElementById('myBtn').addEventListener('mousedown', function (){
timer = setTimeout(function(){
alert("Ey, release the button!");
}, 3000);
});

Javascript Not Updating Function on Interval

I've got a script that looks to see how many records are "unread" for notifications. When I use the following code the page will load then number when the page loads:
$(document).ready(function(){
$("#notes_number").load("getnumber.php");
});
But I'm trying to make it update every 5 secs so I searched around and found this but it's not working. I'm trying to figure out how to get it operational. Here is the Javascript code:
//TRYING TO GET TO UPDATE EVERY 5 SECONDS
window.setInterval(function(){
function(){
$("#notes_number").load("getnumber.php");
}
}, 5000);
//THIS IS WHAT HAPPENS WHEN A PARTICULAR BUTTON IS PRESSED
function toggleDiv(divId) {
$("#"+divId).show();
//GET THE NOTIFICATIONS
$(document).ready(function(){
$("#myContent").load("getnotes.php?page=<? echo $page; ?>");
});
//RESET THE NUMBER OF NOTIFICATIONS UNREAD
$(document).ready(function(){
$("#notes_number").load("getnumber.php");
});
}
I was putting the code to do inside 2 functions. The code should be:
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
You've got an extra function declaration in here - it won't ever execute:
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
IMO, you shouldn't use setInterval like that. The response order isn't guaranteed, you should use setTimeout inside the callback to guarantee you get a response before sending the next request off:
function getNotes() {
$("#notes_number").load("getnumber.php", function() {
setTimeout(getNotes, 5000);
});
}
getNotes();
Replace following chunk of code
window.setInterval(function(){
function(){
$("#notes_number").load("getnumber.php");
}
}, 5000);
with
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);

Call function with setInterval in jQuery?

I'm trying to create a interval call to a function in jQuery, but it doesn't work! My first question is, can I mix common JavaScript with jQuery?
Should I use setInterval("test()",1000); or something like this:
var refreshId = setInterval(function(){
code...
}, 5000);
Where do I put the function that I call and how do I activate the interval? Is it a difference in how to declare a function in JavaScript compared to jQuery?
To write the best code, you "should" use the latter approach, with a function reference:
var refreshId = setInterval(function() {}, 5000);
or
function test() {}
var refreshId = setInterval(test, 5000);
but your approach of
function test() {}
var refreshId = setInterval("test()", 5000);
is basically valid, too (as long as test() is global).
Note that there is no such thing really as "in jQuery". You're still writing the Javascript language; you're just using some pre-made functions that are the jQuery library.
First of all: Yes you can mix jQuery with common JS :)
Best way to build up an intervall call of a function is to use setTimeout methode:
For example, if you have a function called test() and want to repeat it all 5 seconds, you could build it up like this:
function test(){
console.log('test called');
setTimeout(test, 5000);
}
Finally you have to trigger the function once:
$(document).ready(function(){
test();
});
This document ready function is called automatically, after all html is loaded.
I have written a custom code for setInterval function which can also help
let interval;
function startInterval(){
interval = setInterval(appendDateToBody, 1000);
console.log(interval);
}
function appendDateToBody() {
document.body.appendChild(
document.createTextNode(new Date() + " "));
}
function stopInterval() {
clearInterval(interval);
console.log(interval);
}
<!DOCTYPE html>
<html>
<head>
<title>setInterval</title>
</head>
<body>
<input type="button" value="Stop" onclick="stopInterval();" />
<input type="button" value="Start" onclick="startInterval();" />
</body>
</html>
jQuery is just a set of helpers/libraries written in Javascript. You can still use all Javascript features, so you can call whatever functions, also from inside jQuery callbacks.
So both possibilities should be okay.
setInterval(function() {
updatechat();
}, 2000);
function updatechat() {
alert('hello world');
}

Categories