26

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?

1
  • 5
    (a) jQuery is JavaScript. It is like if you are asking if I use framework XYZ in PHP can I still use PHP? (b) Always pass a function reference to setInterval (c) Please post your code. If you pass a string to setInterval than it does matter where the function is declared (has to be in global scope) and that is also the reason why you should avoid it. Commented Mar 30, 2011 at 9:05

5 Answers 5

51

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.

Sign up to request clarification or add additional context in comments.

9 Comments

Hmmm, if I use var refreshId = setInterval(function() {}, 5000); should the function that would be called each 5 sec be between the {} and not alone in a separate function with a name? Hope you understand what i mean!? What I want to achieve is an slider animation to move after some seconds.
@user637364: That's right. I made an anonymous function inline.
@user637364: Just pass the function that should be called to setInterval. You can wrap it an extra function call, but that just generates unnecessary overhead.
For what it's worth, the 3rd example causes the JS engine to reparse/recompile code, making it the slower approach between the 3 of them. Due to the radically different concept, it is also susceptible to increase in memory as well as potential memory leaks.
Christian is right (though the perceived speed difference is likely to be negligible at a repeat rate of 5s).
|
7

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.

5 Comments

Why would you not just use setInterval to do that?
With settimeout im always sure, that the calling of my function always takes place after the desired time and after the function was finished... 5 seconds is ok with setintervall... but what happens if you have tighter timeframe and your function isnt finised after lets say 300ms and you call the function again??? with settimeout this cant happen...
jQuery is common JS. It's just a bunch of functions. Beginners seem to think that it's a separate language because they've never seen Javascript written properly before (whereas jQuery documentation and examples use it).
@InfernalBadger: ayk is essentially introducing a manual delay between repeats, guaranteeing time for the callback to complete before scheduling a repeat. This is perfectly ok in some situations: just be aware that three 300ms iterations may not take 900ms to complete.
Yes, thats true... but finally jQ gives easy entry to js progging, so... :) And Yes, with my method you will not have 4 calls of you function after 20 seconds... :) it will be after 20seconds and 4x 1ms? :D
1

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>

Comments

0

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.

Comments

-1
setInterval(function() {
    updatechat();
}, 2000);

function updatechat() {
    alert('hello world');
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.