How to refresh a script after some time using Javascript - 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);

Related

Call a javascript function from HTML element

I have a button on a webpage which loads after a given amount of time, works well but my client would like an easy way to add a button that calls this function so he can add dynamic values to it.
In this instance the button should remove a class after 5 seconds of the page/element loading:
Problem, the function is not being called, I have checked the reference to the javascript file is correct, I suspect the issue is the way I am calling the function, here is my code:
<a href="somewhere.com" id="myButton" window.onload='showButton("myButton", "5000")';
class="invisible">Now you can see me!</a>
function showButton(id, time) {
setTimeout(function() { showButtonPrep(id, time); }, time);
console.log("I have fired!");
}
function showButtonPrep(id, time) {
var button = document.getElementById(id);
button.classList.remove('invisible');
}
The console does not log the string so I can see it is not being loaded
I have tried variations of the load, i.e
window.load
this.load
The javascript file containing the function is in the footer, if I put an alert in top of the javascript file that does fire.
window.onload is not a valid HTML attribute for <a>. This seems a mixup between HTML and JavaScript.
You should put that inside a script:
window.onload = () => showButton("myButton", 5000);
function showButton(id, time) {
setTimeout(function() {
showButtonPrep(id, time);
}, time);
console.log("I have fired! Now wait 5 seconds...");
}
function showButtonPrep(id, time) {
var button = document.getElementById(id);
button.classList.remove('invisible');
}
.invisible { display: none }
Now you can see me!

Change interval in Setinterval

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>

Automate Exploding Text Jquery Jsfiddle

http://jsfiddle.net/doktormolle/dNXVx/
How can I make this animate automatically?
I'm new to all this so any help is much appreciated!
function fx(o)
{
var $o=$(o);
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('position','relative');
$('span',$o).stop().css({position:'relative',
opacity:0,
fontSize:84,
top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
}).animate({opacity:1,fontSize:12,top:0,left:0},1000);
}​
I think you want the animate function to be called without click.. if that is the case you can call the function directly or use a timer for an effect. See below,
Change the span like below,
<span id="animateMe">click here</span>
And this script below the fx inside document ready,
Direct Call:
$(function() {
fx('#animateMe');
});
Timer (after 2 secs)
$(function() {
setTimeout(function () {
fx('#animateMe');
}, 2000); //2000 milli seconds = 2 secs
});
http://jsfiddle.net/dNXVx/483/

How to put a delay in loading of images in the same area to make it look like an animation?

Basically I have like 2 images, and I want to show one for 3 seconds, then replace it with another, in the same img tag.
This is what I have so far:
$(function(){
$("#image_area").hide();
$('#W40').click(function(){
$("#image_area img").remove();
show_image_area('40');
});
});
So the flow is first hide the #image_area, then when #W40 button is clicked, remove any current image in the area and run the show_image_area function, the function is as follows:
function show_image_area(world){
if (!$("#image_area img").length) { //only run if no current image exists
$('#image_area').show();
$('#image_area').prepend("<img id='tw_image' src='world+"/7.png' width=\"1000\" height=\"1030\" />");
setTimeout($("#tw_image").attr("src", "world+"/8.png"), 3000);
}
}
Right now, if I run these code, the 8.png shows almost immediately, and there are no 3 second delay that I wanted.
You have an extra " in the code: should be $("#tw_image").attr("src", world+"/8.png").
Also, I would put $("#tw_image").attr("src", world+"/8.png") in a function of it's own.
function SwapImage(world)
{
$("#tw_image").attr("src", world+"/8.png");
}
Then change your last line to setTimeout(SwapImage(world), 3000);
This isnt fully tested but gives you an idea:
$(function(){
$("#image_area").hide();
$('#W40').click(function(){
$("#image_area img").remove()
show_image_area('40');
});
});
function show_image_area(world){
var newImg = $('<img />').css({width: 1000, height: 1030}).attr({id: 'tw_image', src: world+'/7.png');
if ( !$("#image_area img").length ) { //only run if no current image exists
$('#image_area').prepend(newImg).show('fast');
setTimeout( function() {
$("#tw_image").attr("src", world+"/8.png");
}, 3000);
}
}
Basically yours was immediately firing the setTimeout function instead of passing in a function to be fired later
That's because the first parameter of setTimeout is not a function.
Also there is an extra quote on that line.
Also, the "world" variable might need closure (can't remember).
Try
function show_image_area(world){
if (!$("#image_area img").length) { //only run if no current image exists
$('#image_area').show();
$('#image_area').prepend("<img id='tw_image' src='world+"/7.png' width=\"1000\" height=\"1030\" />");
var myWorld = world;
setTimeout(function () {$("#tw_image").attr("src", myWorld+"/8.png");}, 3000);
}
}
Your setTimeout call is a bit off:
setTimeout($("#tw_image").attr("src", "world+"/8.png"), 3000);
The first argument should be the function to execute:
setTimeout(function() { $("#tw_image").attr("src", "world/8.png") }, 3000);
Also, I'm not sure what "world" is so I merged it into the new src path to fix a stray double quote.

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