SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    What is best method for stopping a JavaScript code in a Loop from running for X Secon

    Hi,

    I have a complex Web page which has many different DIVs and many differnet Javascript functions.
    I want one one of these functions to Loop continually, updating the value of a certain DIV with data from the Server. But I want this Loop to Stop for X seconds before executing again. What is the best method of achieving this objective?

    Just to be clear: this Stop code should not stop all Javascript code from running or freez the Web browser but should ONLY stop that given Loop for X seconds.

    Than You

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Possibly look to jquery .delay()

  3. #3
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    We do not use JQuery. Pure JavaScript solution only please. Thanks.

    Quote Originally Posted by EricWatson View Post
    Possibly look to jquery .delay()

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    setInterval(myfunc, 5000); will run the myfunc() function once every five seconds.

    if you only want the function to run once then substitute setTimeout with the same parameters instead.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Do we need to call the function myfunc from setTimeout or can we just call setTimeout to stop Javascript
    from running for X Seconds and then call function myfunc with parameters we want.

    And what is best way to start this infinite loop, via OnLOad of the BODY?
    So like this would work?

    <BODY Onload('stay_alive()'>

    function 'stay_alive()
    {

    $row_val = 0;
    for (1 > 0) {

    setTimeout(10000);
    ++$row_val;

    display_value($row_val);

    }

    }

    Quote Originally Posted by felgall View Post
    setInterval(myfunc, 5000); will run the myfunc() function once every five seconds.
    if you only want the function to run once then substitute setTimeout with the same parameters instead.

    Anoox search engine volunteer

    www.anoox.com

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by WorldNews View Post
    We do not use JQuery. Pure JavaScript solution only please. Thanks.
    Would you mind sharing your reasons for not using jQuery.
    Is it a compatibility issue?
    I'm not trolling, I find this genuinely interesting.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    JavaScript goes at the bottom of the page just before the </body> tag - onload is almost never needed any more when you attach the JavaScript there and attaching it at the bottom allows the page to load faster and the script to run as early as possible.

    setTimeout takes two parameters - the first is the function mto run and the second is the delay before running that function.

    setTimeout(stay_alive, 10000);

    if you need to pass parameters to the function to be called then wrap it in an anonymous function

    setTimeout(function() {stay_alive(x,y)}, 10000);



    As for jQuery - that is a huge amount of code to do what can otherwise be done in just a couple of lines of JavaScript - unless you need to use a lot of the JQuery functionality in your page then it is far cleaner and faster to omit it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by felgall View Post
    As for jQuery - that is a huge amount of code to do what can otherwise be done in just a couple of lines of JavaScript - unless you need to use a lot of the JQuery functionality in your page then it is far cleaner and faster to omit it.
    I agree that it's pointless to include jQuery for things that would be trivial to implement in pure JavScript.
    However the current jQuery weighs in at 91 kb in its minified form and you easily can save this amount of bytes by optimizing your site in other ways (images etc).
    The reason I asked is that I'm trying to weigh up the best use case for jQuery in my own mind (it is very tempting to use it for everything) and am interested in hearing other peoples opinions.
    Anyway, this is getting a little off-topic. Thanks for taking the time to address the point though.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Pullo View Post
    I agree that it's pointless to include jQuery for things that would be trivial to implement in pure JavScript.
    However the current jQuery weighs in at 91 kb in its minified form and you easily can save this amount of bytes by optimizing your site in other ways (images etc).
    not if all your pages average around 50k including all the images and scripts as is the case for most of my sites - also I already have my own versions of all of the various functions that JQuery provides that I actually use in my web pages toat only take up about 1k - it would be different if I were using more of the sorts of functionality that JQuery provides.

    Quote Originally Posted by Pullo View Post
    The reason I asked is that I'm trying to weigh up the best use case for jQuery in my own mind (it is very tempting to use it for everything) and am interested in hearing other peoples opinions.
    Anyway, this is getting a little off-topic. Thanks for taking the time to address the point though.
    If you are going to use JQuery then a couple of things to keep in mind:

    1. it is best to use a common copy of the JQuery library such as the one provided by Google - that way a significant fraction of your visitors will already have it cached from other sites that also reference that copy and so they will not have to download it again - that saves 91k off what they have to download to use your page compared to if you use your own copy of the script.
    2. A reasonable level of JavaScript knowledge is required in order to properly use JQuery which you have but which many of those posting questions in the forum obviously don't have based on some of the code I have seen (for example where someone uses 20 lines of code calling JQuery that could be done in fewer lines of JavaScript without JQuery.

    From what I have seen, most JQuery questions in the forum are being asked by someone who is trying to use JQuery without knowing enough JavaScript first.

    With the question being asked in this particular thread only one line of ordinary JavaScript is needed to do what was asked and so unless there is a need for JQuery elsewhere in the code there is no point including it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for this info.

    But I am confused, well may be better say perplexed, by you saying that the function
    setTimeout(update_user(), 10000);

    should be called not from the <BODY Onload.....> but this JavaScript code should be placed inside the body of the page right
    before the </body> tag!

    So you saying like this:


    <JavaScript>

    update_user();

    function update_user ()
    {
    for (1 > 0) {

    setTimeout(update_new(), 10000);

    }
    }



    function update_new ()
    {
    /* Update the relevant DIV in user browser */
    }

    </JavaScript>
    </BODY>
    <?HTML>


    ThanX,


    Quote Originally Posted by felgall View Post
    JavaScript goes at the bottom of the page just before the </body> tag - onload is almost never needed any more when you attach the JavaScript there and attaching it at the bottom allows the page to load faster and the script to run as early as possible.
    setTimeout takes two parameters - the first is the function mto run and the second is the delay before running that function.

    setTimeout(stay_alive, 10000);

    if you need to pass parameters to the function to be called then wrap it in an anonymous function

    setTimeout(function() {stay_alive(x,y)}, 10000);



    As for jQuery - that is a huge amount of code to do what can otherwise be done in just a couple of lines of JavaScript - unless you need to use a lot of the JQuery functionality in your page then it is far cleaner and faster to omit it.

    Anoox search engine volunteer

    www.anoox.com

  11. #11
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Reason we do not want JQuery are;

    1- What felgall has already explained
    2- I find JQuery really ugly language
    3- I think it is a waste of time to learn a language that is overlay to another language. I mean why master JQuery when mastering JavaScript is more fundamental.

    Now I do not want to start a flame War about JQuery. That is 1 I am sure there are cases where JQuery is definetly a good idea, 2 for some people it makes sense to use JQuery.

    Anoox search engine volunteer

    www.anoox.com

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Thank you for sharing your thoughts on jQuery, felgall and WorldNews.
    As I said, I'm better trying to formulate my opinion on when and when not to use it, and this helps.
    I especially agree with felgall's point two. As they say, when the only tool you have is a hammer, everything starts to look like a nail

    So, to bring this back on topic:

    Quote Originally Posted by WorldNews View Post
    But I am confused, well may be better say perplexed, by you saying that the function
    setTimeout(update_user(), 10000);

    should be called not from the <BODY Onload.....> but this JavaScript code should be placed inside the body of the page right
    before the </body> tag!
    As a rule of thumb, inline JavaScript, just like inline CSS is to be avoided where possible.
    If you're curious why, just ask Google: http://www.google.com/search?q=why+a...ine+javascript

    So, instead of writing:

    HTML Code:
    <body onload="alert("hello")>
    it's better to write:

    HTML Code:
        <script>
          window.load=function(){
            alert("hello");
          }
        </script>
      </body>
    </html>
    However, as felgall points out, it's normally sufficient to write:

    HTML Code:
        <script>
          alert("hello");
        </script>
      </body>
    </html>

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by WorldNews View Post
    setTimeout(update_user(), 10000);
    That will run update_user() straight away and expect it to return a function - the function returned will be delayed for 10 seconds by the setTimeout.

    to delay update_user for 10 seconds use:

    setTimeout(update_user, 10000);
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by WorldNews View Post
    2- I find JQuery really ugly language
    3- I think it is a waste of time to learn a language that is overlay to another language. I mean why master JQuery when mastering JavaScript is more fundamental.
    Neither of those makes sense since JQuery simnply IS JavaScript where you let someone else write a part of the JavaScript for you. Any JQuery statement is a JavaScript method call where the method called is defined using JavaScript within the JQuery oblect's JavaScript code.

    JQuery is just one JavaScript object that someone has defined for you using JavaScript. JQuery isn't another layer on top of JavaScript it simply is JavaScript - which is why it makes no sense for people to try to use JQuery without understanding enough JavaScript to understand how JavaScript objects work.

    Learning JavaScript is more fundamental than learning JQuery() or update_user() as you need JavaScript to define each of those objects before you can use them in your code.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Taiwan
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you should try this:

    Code:
    <script>
    (function update_user() {
        // retrieve data from server
        
        setTimeout(update_user, 10000);
    }());
    </script>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •