Call function with setInterval in jQuery? - javascript

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

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

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>

Javascript clearInterval with button click

I'm having issues getting clearInterval to work when I try to bind it to a button click. Also, apparently the function is starting on it's own... Here's my code
var funky = setInterval(function() {
alert('hello world');
}, 2000);
$('#start').click(function() {
funky();
});
$('#stop').click(function() {
clearInterval(funky);
});
Here's a js fiddle
You have forgot to add jquery library and have made wrong assignment, it needs to be inside callback function.
Working example:
var funky;
$('#start').click(function() {
funky = setInterval(function() {
alert('hello world');
}, 2000);
});
$('#stop').click(function() {
clearInterval(funky);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">start</button>
<button id="stop">stop</button>
First off, yes, when you assign a variable to a function, it self invokes.
Secondly, your click events are not working because you need assign the interval to the variable on the click, not invoke the function - there is no function to invoke, as you would see if you looked at your developer console.
Lastly, it is good practice to wrap the jQuery code in the document ready function to ensure all of your event handlers get bound properly.
$(function () {
var funky;
$('#start').click(function() {
funky = setInterval(function() {
alert('hello world');
}, 1000);
});
$('#stop').click(function() {
clearInterval(funky);
});
});
You're saving the wrong value. Try this:
var funky = function() {
alert('hello world');
}
var funkyId = setInterval(funky, 2000);
$('#start').click(function() {
funky();
});
$('#stop').click(function() {
clearInterval(funkyId);
});
Here I am giving you the idea.
declare a variable e.g. let x;
create a function which you want to bind with setInterval.
e.g.
function funky() {
alert("Hello World");
}
assign start.onclick to a function which will assign the setInterval to x.
e.g start.onclick = function(){
clearInterval(x); // to prevent multiple interval if you click more than one
x = setInterval(funky, 2000); // assign the setInterval to x
};
assign stop.onclick to clearInterval(x) to stop the interval.
e.g. stop.onclick = function() {
clearInterval(x); // to stop the interval
};
That's it. Easy right.

Load javascript after 5 seconds after page has loaded?

I have tried the following:
<body id="myBody" onload = "setTimeout('a()', 5000)" / >
Is this the correct method? The reason why I want to do this is because I have my entire website animating in (such as fade ins) on page load. Having my javascript only makes the animation unsmooth.
Any feedback appreciated.
This code will work. Just set your time in milliseconds and write your JS code on loadAfterTime function:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// code you need to execute goes here.
}
</script>
window.addEventListener("load", function () {
animation();
setTimeout(otherOperation, 5000);
}, false);
function animation() {}
function otherOperation() {}
maybe you can use code like this
<body id="myBody" onload = "setTimeout(a, 5000)">
Try this
if you are using jQuery your animation has a callback that you can use to delay the firing of all other javascript events like so:
$( window ).on( 'load', function () {
$( '.someElements' ).animate({
// properties to animate
}, 300, function () {
initScripts();
});
});
function initScripts () {
// call all other functions here
}
The Browser is always load all of your script if any when you open the web page. So It depend on when you call your javascript functions.
Try this:
document.ready(function(){
// your code
});
or
$(function(){
// your code
});
both of them make sure that all of element on your page have been loaded.

calling Jquery function from javascript

How can i call a jQuery function from javascript?
//jquery
$(function() {
function my_fun(){
/.. some operations ../
}
});
//just js
function js_fun () {
my_fun(); //== call jquery function
}
Yes you can (this is how I understand the original question).
Here is how I did it. Just tie it into outside context.
For example:
//javascript
my_function = null;
//jquery
$(function() {
function my_fun(){
/.. some operations ../
}
my_function = my_fun;
})
//just js
function js_fun () {
my_function(); //== call jquery function - just Reference is globally defined not function itself
}
I encountered this same problem when trying to access methods of the object, that was instantiated
on DOM object ready only. Works. My example:
MyControl.prototype = {
init: function {
// init something
}
update: function () {
// something useful, like updating the list items of control or etc.
}
}
MyCtrl = null;
// create jquery plug-in
$.fn.aControl = function () {
var control = new MyControl(this);
control.init();
MyCtrl = control; // here is the trick
return control;
}
now you can use something simple like:
function() = {
MyCtrl.update(); // yes!
}
You can't.
function(){
function my_fun(){
/.. some operations ../
}
}
That is a closure. my_fun() is defined only inside of that anonymous function. You can only call my_fun() if you declare it at the correct level of scope, i.e., globally.
$(function () {/* something */}) is an IIFE, meaning it executes immediately when the DOM is ready. By declaring my_fun() inside of that anonymous function, you prevent the rest of the script from "seeing" it.
Of course, if you want to run this function when the DOM has fully loaded, you should do the following:
function my_fun(){
/* some operations */
}
$(function(){
my_fun(); //run my_fun() ondomready
});
// just js
function js_fun(){
my_fun(); //== call my_fun() again
}
var jqueryFunction;
$().ready(function(){
//jQuery function
jqueryFunction = function( _msg )
{
alert( _msg );
}
})
//javascript function
function jsFunction()
{
//Invoke jQuery Function
jqueryFunction("Call from js to jQuery");
}
http://www.designscripting.com/2012/08/call-jquery-function-from-javascript/
<script>
// Instantiate your javascript function
niceJavascriptRoutine = null;
// Begin jQuery
$(document).ready(function() {
// Your jQuery function
function niceJqueryRoutine() {
// some code
}
// Point the javascript function to the jQuery function
niceJavaScriptRoutine = niceJueryRoutine;
});
</script>
jQuery functions are called just like JavaScript functions.
For example, to dynamically add the class "red" to the document element with the id "orderedlist" using the jQuery addClass function:
$("#orderedlist").addClass("red");
As opposed to a regular line of JavaScript calling a regular function:
var x = document.getElementById("orderedlist");
addClass() is a jQuery function, getElementById() is a JavaScript function.
The dollar sign function makes the jQuery addClass function available.
The only difference is the jQuery example is calling the addclass function of the jQuery object $("#orderedlist") and the regular example is calling a function of the document object.
In your code
$(function() {
// code to execute when the DOM is ready
});
Is used to specify code to run when the DOM is ready.
It does not differentiate (as you may think) what is "jQuery code" from regular JavaScript code.
So, to answer your question, just call functions you defined as you normally would.
//create a function
function my_fun(){
// call a jQuery function:
$("#orderedlist").addClass("red");
}
//call the function you defined:
myfun();
I made it...
I just write
jQuery('#container').append(html)
instead
document.getElementById('container').innerHTML += html;
//javascript function calling an jquery function
//In javascript part
function js_show_score()
{
//we use so many javascript library, So please use 'jQuery' avoid '$'
jQuery(function(){
//Call any jquery function
show_score(); //jquery function
});(jQuery);
}
//In Jquery part
jQuery(function(){
//Jq Score function
function show_score()
{
$('#score').val("10");
}
});(jQuery);
My problem was that I was looking at it from the long angle:
function new_line() {
var html= '<div><br><input type="text" value="" id="dateP_'+ i +'"></div>';
document.getElementById("container").innerHTML += html;
$('#dateP_'+i).datepicker({
showOn: 'button',
buttonImage: 'calendar.gif',
buttonImageOnly: true
});
i++;
}
<script>
$.myjQuery = function() {
alert("jQuery");
};
$(document).ready(function() {
alert("Welcome!");
});
function display() {
$.myjQuery();
};
</script>
<input type="button" value="submit" onclick=" display();">
Hope this will work for you!

Categories