Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #21401 > unrolled thread

Draw/animation fail to stop

Back to article view | Back to comp.lang.javascript

Contents

  Draw/animation fail to stop jonas.thornvall@gmail.com - 2013-09-21 06:33 -0700
    Re: Draw/animation fail to stop "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-09-21 15:52 +0200
      Re: Draw/animation fail to stop jonas.thornvall@gmail.com - 2013-09-21 20:14 -0700
        Re: Draw/animation fail to stop Stefan Weiss <krewecherl@gmail.com> - 2013-09-22 06:47 +0200
          Re: Draw/animation fail to stop JJ <duh@nah.meh> - 2013-09-22 13:05 +0700
          Re: Draw/animation fail to stop "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-09-22 09:10 +0200
          Re: Draw/animation fail to stop jonas.thornvall@gmail.com - 2013-09-22 01:30 -0700
            Re: Draw/animation fail to stop jonas.thornvall@gmail.com - 2013-09-22 01:40 -0700
          Re: Draw/animation fail to stop Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-09-22 12:42 +0200
            Re: Draw/animation fail to stop Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-09-23 18:06 +0100
              Re: Draw/animation fail to stop Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-09-24 01:00 +0200
                Re: Draw/animation fail to stop Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-09-25 17:18 +0100
                  Re: Draw/animation fail to stop Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-09-26 00:55 +0200
                    Re: Draw/animation fail to stop Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2013-09-25 22:33 -0300
                      Re: Draw/animation fail to stop Andrew Poulos <ap_prog@hotmail.com> - 2013-09-26 15:21 +1000
                    Re: Draw/animation fail to stop Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-09-28 19:16 +0100
        Re: Draw/animation fail to stop Christoph Michael Becker <cmbecker69@arcor.de> - 2013-09-22 14:14 +0200
          Re: Draw/animation fail to stop Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-09-22 15:06 +0200
    Re: Draw/animation fail to stop Ken <usenet-so@abdiassoftware.com> - 2013-09-22 13:44 -0500
    Re: Draw/animation fail to stop Ken <usenet-so@abdiassoftware.com> - 2013-09-22 13:50 -0500

#21401 — Draw/animation fail to stop

This function starts a draw/plot sequense using a function call in a form.

function initanime()
{
   size = 0;
   start = 0;
   multip = + 1;
   run = 1;
   refresh = setInterval(draw, 0);
}

This funtion i call to stop the draw/plot also from a form.

function stopanime()
{
   clearInterval(refresh);
}


But it seem it is not at all stabile, sometimes it work sometimes not and the 
longer it run the more likely it doesn't and it totally seem to bug out when the values i plot have negative values.

The frameset and script can be reached at.

http://web.comhem.se/jonasth/offset/main.html

Suggestion regarding performance optimisation, functional and coding style appreciated.

[toc] | [next] | [standalone]

#21402

jonas.thornval wrote on 21 sep 2013 in comp.lang.javascript:

> function initanime()
> {
>    size = 0;
>    start = 0;
>    multip = + 1;
>    run = 1;
>    refresh = setInterval(draw, 0);
>}
> 
> This funtion i call to stop the draw/plot also from a form.
> 
> function stopanime()
> {
>    clearInterval(refresh);
>}

1 you need to define the variable "refresh" outside the functions. 
[same goes for "multip"]

2 an interval of 0 ms is not an interval.

> The frameset and script can be reached at

I am not going to look, the problem seems clear.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#21404

Den lördagen den 21:e september 2013 kl. 15:52:06 UTC+2 skrev Evertjan.:
> jonas.thornval wrote on 21 sep 2013 in comp.lang.javascript:
> 
> 
> 
> > function initanime()
> 
> > {
> 
> >    size = 0;
> 
> >    start = 0;
> 
> >    multip = + 1;
> 
> >    run = 1;
> 
> >    refresh = setInterval(draw, 0);
> 
> >}
> 
> > 
> 
> > This funtion i call to stop the draw/plot also from a form.
> 
> > 
> 
> > function stopanime()
> 
> > {
> 
> >    clearInterval(refresh);
> 
> >}
> 
> 
> 
> 1 you need to define the variable "refresh" outside the functions. 
> 
> [same goes for "multip"]
> 
> 
> 
> 2 an interval of 0 ms is not an interval.
> 
> 
> 
> > The frameset and script can be reached at
> 
> 
> 
> I am not going to look, the problem seems clear.
> 
> 
> 
> -- 
> 
> Evertjan.
> 
> The Netherlands.
> 
> (Please change the x'es to dots in my emailaddress)

Thank you Evertjan it was because variable was local. I am stupid, i did not even realise refresh it was a variable..., well that is what happen when you just copy code. 

Regarding setting the interval to 0 it seem to work but what is the correct way to do it, i want the animation to draw at highest rate. That is why i set it to zero.

[toc] | [prev] | [next] | [standalone]

#21405

On 2013-09-22 05:14, jonas.thornvall@gmail.com wrote:
> Den lördagen den 21:e september 2013 kl. 15:52:06 UTC+2 skrev Evertjan.:
>> jonas.thornval wrote on 21 sep 2013 in comp.lang.javascript:
>> 
>> > function initanime()
>> > {
>> >    size = 0;
>> >    start = 0;
>> >    multip = + 1;
>> >    run = 1;
>> >    refresh = setInterval(draw, 0);
>> >}
>> > 
>> > This funtion i call to stop the draw/plot also from a form.
>> > 
>> > function stopanime()
>> > {
>> >    clearInterval(refresh);
>> >}

>> 1 you need to define the variable "refresh" outside the functions. 

> Thank you Evertjan it was because variable was local.

I don't get it - neither Evertjan's suggestion, nor why this has
apparently solved the problem. Everything in this script is global,
there are no local variables. So how can declaring "refresh" outside of
the functions change anything?

> 2 an interval of 0 ms is not an interval.

It's not? Next you're going to tell me 0 is not a percentage.
http://tinyurl.com/zeroperc

- stefan

[toc] | [prev] | [next] | [standalone]

#21406

On Sun, 22 Sep 2013 06:47:58 +0200, Stefan Weiss wrote:
> I don't get it - neither Evertjan's suggestion, nor why this has
> apparently solved the problem. Everything in this script is global,
> there are no local variables. So how can declaring "refresh" outside of
> the functions change anything?

OP didn't give all the relevant code, but Evertjan knows that based on the
problem, and knows what are the possibilities that caused it.

>> 2 an interval of 0 ms is not an interval.
> 
> It's not? Next you're going to tell me 0 is not a percentage.
> http://tinyurl.com/zeroperc

It is an interval. However, a minimum value is enforced and a 0ms interval
won't actually be used.

[toc] | [prev] | [next] | [standalone]

#21407

Stefan Weiss wrote on 22 sep 2013 in comp.lang.javascript:

>>> 1 you need to define the variable "refresh" outside the functions. 
> 
>> Thank you Evertjan it was because variable was local.
> 
> I don't get it - neither Evertjan's suggestion, nor why this has
> apparently solved the problem. Everything in this script is global,
> there are no local variables. So how can declaring "refresh" outside of
> the functions change anything?

So then this solution was a miracle?

I like it when my miracles work out okay, call it mazzel or broche.
 
>> 2 an interval of 0 ms is not an interval.
> 
> It's not? Next you're going to tell me 0 is not a percentage.
> http://tinyurl.com/zeroperc

A setInterval with a duration of 0 probably wants to fire without waiting 
for the intended function to end, so it heavily depends on the time that 
takes and the particular javascript engine.

Probably a number of firing times will be dropped, theoretically an 
infinite amount of them or a stack could be filled ad infinitum.

I would prefer to use setTimeout at the end of the fired function, and set 
that to 1 or 10 ms, just for the added beauty of it, or to give time for 
other setTimeout functions to execute.

So perhaps setInterval 0 ms works on some or all engines, because of the 
single treaded nature of present day engines and the intended leniancy of 
Javascript, even then I see it as sloppy code. 

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#21408

Den söndagen den 22:e september 2013 kl. 06:47:58 UTC+2 skrev Stefan Weiss:
> On 2013-09-22 05:14, jonas.thornvall@gmail.com wrote:
> 
> > Den lördagen den 21:e september 2013 kl. 15:52:06 UTC+2 skrev Evertjan.:
> 
> >> jonas.thornval wrote on 21 sep 2013 in comp.lang.javascript:
> 
> >> 
> 
> >> > function initanime()
> 
> >> > {
> 
> >> >    size = 0;
> 
> >> >    start = 0;
> 
> >> >    multip = + 1;
> 
> >> >    run = 1;
> 
> >> >    refresh = setInterval(draw, 0);
> 
> >> >}
> 
> >> > 
> 
> >> > This funtion i call to stop the draw/plot also from a form.
> 
> >> > 
> 
> >> > function stopanime()
> 
> >> > {
> 
> >> >    clearInterval(refresh);
> 
> >> >}
> 
> 
> 
> >> 1 you need to define the variable "refresh" outside the functions. 
> 
> 
> 
> > Thank you Evertjan it was because variable was local.
> 
> 
> 
> I don't get it - neither Evertjan's suggestion, nor why this has
> 
> apparently solved the problem. Everything in this script is global,
> 
> there are no local variables. So how can declaring "refresh" outside of
> 
> the functions change anything?
> 
> 
> 
> > 2 an interval of 0 ms is not an interval.
> 
> 
> 
> It's not? Next you're going to tell me 0 is not a percentage.
> 
> http://tinyurl.com/zeroperc
> 
> 
> 
> - stefan

Well i just acknowledge something changed before it worked now and then, since i set refresh as a global initiated variable. Stop animation button seem to work everytime. Most frequently was problem when startposition was negative now it works like a charm.

Test it, the source script available by right click.
http://web.comhem.se/jonasth/offset/main.html

[toc] | [prev] | [next] | [standalone]

#21409

Den söndagen den 22:e september 2013 kl. 10:30:54 UTC+2 skrev jonas.t...@gmail.com:
> Den söndagen den 22:e september 2013 kl. 06:47:58 UTC+2 skrev Stefan Weiss:
> 
> > On 2013-09-22 05:14, jonas.thornvall@gmail.com wrote:
> 
> > 
> 
> > > Den lördagen den 21:e september 2013 kl. 15:52:06 UTC+2 skrev Evertjan.:
> 
> > 
> 
> > >> jonas.thornval wrote on 21 sep 2013 in comp.lang.javascript:
> 
> > 
> 
> > >> 
> 
> > 
> 
> > >> > function initanime()
> 
> > 
> 
> > >> > {
> 
> > 
> 
> > >> >    size = 0;
> 
> > 
> 
> > >> >    start = 0;
> 
> > 
> 
> > >> >    multip = + 1;
> 
> > 
> 
> > >> >    run = 1;
> 
> > 
> 
> > >> >    refresh = setInterval(draw, 0);
> 
> > 
> 
> > >> >}
> 
> > 
> 
> > >> > 
> 
> > 
> 
> > >> > This funtion i call to stop the draw/plot also from a form.
> 
> > 
> 
> > >> > 
> 
> > 
> 
> > >> > function stopanime()
> 
> > 
> 
> > >> > {
> 
> > 
> 
> > >> >    clearInterval(refresh);
> 
> > 
> 
> > >> >}
> 
> > 
> 
> > 
> 
> > 
> 
> > >> 1 you need to define the variable "refresh" outside the functions. 
> 
> > 
> 
> > 
> 
> > 
> 
> > > Thank you Evertjan it was because variable was local.
> 
> > 
> 
> > 
> 
> > 
> 
> > I don't get it - neither Evertjan's suggestion, nor why this has
> 
> > 
> 
> > apparently solved the problem. Everything in this script is global,
> 
> > 
> 
> > there are no local variables. So how can declaring "refresh" outside of
> 
> > 
> 
> > the functions change anything?
> 
> > 
> 
> > 
> 
> > 
> 
> > > 2 an interval of 0 ms is not an interval.
> 
> > 
> 
> > 
> 
> > 
> 
> > It's not? Next you're going to tell me 0 is not a percentage.
> 
> > 
> 
> > http://tinyurl.com/zeroperc
> 
> > 
> 
> > 
> 
> > 
> 
> > - stefan
> 
> 
> 
> Well i just acknowledge something changed before it worked now and then, since i set refresh as a global initiated variable. Stop animation button seem to work everytime. Most frequently was problem when startposition was negative now it works like a charm.
> 
> 
> 
> Test it, the source script available by right click.
> 
> http://web.comhem.se/jonasth/offset/main.html

I was to hasty problem remain, maybe it is because setInterval 0 maybe it somehow buissy clearInterval can not reach engine.

[toc] | [prev] | [next] | [standalone]

#21410

Stefan Weiss wrote:

> On 2013-09-22 05:14, jonas.thornvall@gmail.com wrote:
>> Den lördagen den 21:e september 2013 kl. 15:52:06 UTC+2 skrev Evertjan.:
>>> jonas.thornval wrote on 21 sep 2013 in comp.lang.javascript:
>>> 
>>> > function initanime()
>>> > {
>>> >    size = 0;
>>> >    start = 0;
>>> >    multip = + 1;
>>> >    run = 1;
>>> >    refresh = setInterval(draw, 0);
>>> […]
>> 2 an interval of 0 ms is not an interval.
> 
> It's not? Next you're going to tell me 0 is not a percentage.
> http://tinyurl.com/zeroperc

Sarcasm aside, it is unwise to use 0 (milliseconds) for the second argument 
of window.setInterval(…) (which should be written so).  Normalization to a 
minimum sensible value may or may not occur.  If it does not occur, there 
will be high CPU load slowing down the browser and other applications 
because operations cannot be performed fast enough and intervals will 
overlap.  This has caused performance problems with Internet Explorer.

A value of 50 (ms) has proven to be a sensible minimum value for the 
majority of client applications, however the minimum normalization value is 
10 (ms) in Mozilla for 32-bit systems.

That said, window.setInterval() should be avoided in the first place (at 
least for short interval lengths, like for animations and transitions, 
should that still be considered necessary in view of CSS3) in favor of 
window.setTimeout() which is passed a function that calls 
window.setTimeout() again:

  var t = null;
  var f = function () {
    if (t !== null)
    {
      window.clearTimeout(t);
      t = null;
    }

    /* do something every 50 milliseconds */

    t = window.setTimeout(f, 50);
  };

  f();

The advantage of the latter is that timeouts do not overlap if a function 
call takes longer than the interval length.  This reduces CPU load as there 
will be only one timeout-triggered function call processed at the same time 
(in the same tab/browser).

I have posted a breakdown of this, with a reference to Mozilla code as an 
example, a while ago; you may still find it by searching for “setTimeout”, 
“setInterval”, and my (nick)name.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#21418

In comp.lang.javascript message <2797316.uecmfydTqv@PointedEars.de>,
Sun, 22 Sep 2013 12:42:41, Thomas 'PointedEars' Lahn
<PointedEars@web.de> posted:

>
>  var t = null;
>  var f = function () {
>    if (t !== null)
>    {
>      window.clearTimeout(t);
>      t = null;
>    }
>
>    /* do something every 50 milliseconds */
>
>    t = window.setTimeout(f, 50);
>  };
>
>  f();
>

The comment is incorrect.

-- 
 (c) John Stockton, nr London, UK.   E-mail, see Home Page.    Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[toc] | [prev] | [next] | [standalone]

#21419

Dr J R Stockton wrote:

> Thomas 'PointedEars' Lahn <PointedEars@web.de> posted:
>>  var t = null;
>>  var f = function () {
>>    if (t !== null)
>>    {
>>      window.clearTimeout(t);
>>      t = null;
>>    }
>>
>>    /* do something every 50 milliseconds */
>>
>>    t = window.setTimeout(f, 50);
>>  };
>>
>>  f();
>>
> 
> The comment is incorrect.

The comment is a placeholder, therefore correct.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#21428

In comp.lang.javascript message <6525778.9mJ5Jx9J8M@PointedEars.de>,
Tue, 24 Sep 2013 01:00:16, Thomas 'PointedEars' Lahn
<PointedEars@web.de> posted:

>Dr J R Stockton wrote:
>
>> Thomas 'PointedEars' Lahn <PointedEars@web.de> posted:
>>>  var t = null;
>>>  var f = function () {
>>>    if (t !== null)
>>>    {
>>>      window.clearTimeout(t);
>>>      t = null;
>>>    }
>>>
>>>    /* do something every 50 milliseconds */
>>>
>>>    t = window.setTimeout(f, 50);
>>>  };
>>>
>>>  f();
>>>
>>
>> The comment is incorrect.
>
>The comment is a placeholder, therefore correct.

Nonsense.  The comment expresses a false meaning, for most values of
"something".  YWIII.

-- 
 (c) John Stockton, Surrey, UK.  ¬@merlyn.demon.co.uk   Turnpike v6.05   MIME.
   Web  <http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.

[toc] | [prev] | [next] | [standalone]

#21429

Dr J R Stockton wrote:

> […] Thomas 'PointedEars' Lahn […] posted:
>> Dr J R Stockton wrote:
>>> Thomas 'PointedEars' Lahn <PointedEars@web.de> posted:
>>>>  var t = null;
>>>>  var f = function () {
>>>>    if (t !== null)
>>>>    {
>>>>      window.clearTimeout(t);
>>>>      t = null;
>>>>    }
>>>>
>>>>    /* do something every 50 milliseconds */
>>>>
>>>>    t = window.setTimeout(f, 50);
>>>>  };
>>>>
>>>>  f();
>>>
>>> The comment is incorrect.
>> The comment is a placeholder, therefore correct.
> 
> Nonsense.  The comment expresses a false meaning, for most values of
> "something". 

Would inserting “approximately” satisfy you, or which part of “placeholder” 
did you not understand?

> YWIII.

WTF?  But here we go again.  You have been spotted arguing against the 
hacker culture, but you are making use of its acronyms and even inventing 
new ones in the same way.  I think the correct term for that is “hypocrite”.
 
-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#21431

On 25-09-2013 19:55, Thomas 'PointedEars' Lahn wrote:
> Dr J R Stockton wrote:
>
>> […] Thomas 'PointedEars' Lahn […] posted:
>>> Dr J R Stockton wrote:
>>>> Thomas 'PointedEars' Lahn <PointedEars@web.de> posted:
>>>>>   var t = null;
>>>>>   var f = function () {
>>>>>     if (t !== null)
>>>>>     {
>>>>>       window.clearTimeout(t);
>>>>>       t = null;
>>>>>     }
>>>>>
>>>>>     /* do something every 50 milliseconds */
>>>>>
>>>>>     t = window.setTimeout(f, 50);
>>>>>   };
>>>>>
>>>>>   f();
>>>>
>>>> The comment is incorrect.
>>> The comment is a placeholder, therefore correct.
>>
>> Nonsense.  The comment expresses a false meaning, for most values of
>> "something".
>
> Would inserting “approximately” satisfy you, or which part of “placeholder”
> did you not understand?
>
>> YWIII.
>
> WTF?  But here we go again.  You have been spotted arguing against the
> hacker culture, but you are making use of its acronyms and even inventing
> new ones in the same way.  I think the correct term for that is “hypocrite”.

After attending comp.lang.javascript for a while, one may risk losing 
the faith in humanity....

--
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#21432

On 26/09/2013 11:33 AM, Joao Rodrigues wrote:
> On 25-09-2013 19:55, Thomas 'PointedEars' Lahn wrote:
>> Dr J R Stockton wrote:
>>
>>> […] Thomas 'PointedEars' Lahn […] posted:
>>>> Dr J R Stockton wrote:
>>>>> Thomas 'PointedEars' Lahn <PointedEars@web.de> posted:
>>>>>>   var t = null;
>>>>>>   var f = function () {
>>>>>>     if (t !== null)
>>>>>>     {
>>>>>>       window.clearTimeout(t);
>>>>>>       t = null;
>>>>>>     }
>>>>>>
>>>>>>     /* do something every 50 milliseconds */
>>>>>>
>>>>>>     t = window.setTimeout(f, 50);
>>>>>>   };
>>>>>>
>>>>>>   f();
>>>>>
>>>>> The comment is incorrect.
>>>> The comment is a placeholder, therefore correct.
>>>
>>> Nonsense.  The comment expresses a false meaning, for most values of
>>> "something".

Here Stocktin is arguing for the sake of it as he deliberately chooses 
to ignore the setTimeout which calls "f" in 50ms (ie a loop has been setup).

>> Would inserting “approximately” satisfy you, or which part of
>> “placeholder”
>> did you not understand?
>>
>>> YWIII.
>>
>> WTF?  But here we go again.  You have been spotted arguing against the
>> hacker culture, but you are making use of its acronyms and even inventing
>> new ones in the same way.  I think the correct term for that is
>> “hypocrite”.
>
> After attending comp.lang.javascript for a while, one may risk losing
> the faith in humanity....

If you really want to lose faith, read the comments on YouTube videos.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#21457

In comp.lang.javascript message <2479854.SYyhZTWsNG@PointedEars.de>,
Thu, 26 Sep 2013 00:55:41, Thomas 'PointedEars' Lahn
<PointedEars@web.de> posted:

>Dr J R Stockton wrote:
>
>> […] Thomas 'PointedEars' Lahn […] posted:
>>> Dr J R Stockton wrote:
>>>> Thomas 'PointedEars' Lahn <PointedEars@web.de> posted:
>>>>>  var t = null;
>>>>>  var f = function () {
>>>>>    if (t !== null)
>>>>>    {
>>>>>      window.clearTimeout(t);
>>>>>      t = null;
>>>>>    }
>>>>>
>>>>>    /* do something every 50 milliseconds */
>>>>>
>>>>>    t = window.setTimeout(f, 50);
>>>>>  };
>>>>>
>>>>>  f();
>>>>
>>>> The comment is incorrect.
>>> The comment is a placeholder, therefore correct.
>>
>> Nonsense.  The comment expresses a false meaning, for most values of
>> "something".
>
>Would inserting “approximately” satisfy you, or which part of
>“placeholder”
>did you not understand?

None.

Consider, as an extreme example, replacing the placeholder with
        while (new Date()%1000 < 900) ; // .
Consider, as a more practical example, replacing the placeholder with a
calculation that takes 200ms.

Users of setTimeout should remember that it calls for a delay of the
stated number of milliseconds from the execution of setTimeout until the
invocation of the first argument; and that the actual delay will be
longer if the system is then busy.


>> YWIII.
>
>WTF?  But here we go again.  You have been spotted arguing against the
>hacker culture, but you are making use of its acronyms and even inventing
>new ones in the same way.  I think the correct term for that is
>“hypocrite”.

OAF.

-- 
 (c) John Stockton, Surrey, UK.  ¬@merlyn.demon.co.uk   Turnpike v6.05   MIME.
   Web  <http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.

[toc] | [prev] | [next] | [standalone]

#21411

jonas.thornvall@gmail.com wrote:

> Regarding setting the interval to 0 it seem to work but what is the
> correct way to do it, i want the animation to draw at highest rate.
> That is why i set it to zero.

You may consider using window.requestAnimationFrame()[1] and provide a
fallback with window.setInterval() or window.setTimeout().

[1]
<https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#21412

Christoph Michael Becker wrote:

> jonas.thornvall@gmail.com wrote:
>> Regarding setting the interval to 0 it seem to work but what is the
>> correct way to do it, i want the animation to draw at highest rate.
>> That is why i set it to zero.
> 
> You may consider using window.requestAnimationFrame()[1] and provide a
> fallback with window.setInterval() or window.setTimeout().
> 
> [1]
> <https://developer.mozilla.org/en-> US/docs/Web/API/window.requestAnimationFrame>

The fastest and most efficient way for animations is CSS3 where hardware 
acceleration can be used.  However, right now it is also the least 
compatible one.  A combination of the two approaches, using the latter only 
as fallback, appears to be prudent.  JSX:dom/ani.js is targeting that 
approach since several revisions.  Once it has checked out, the code will be 
licensed as free software under the GNU GPL v3 like the rest of JSX.

<http://PointedEars.de/wsvn/JSX/trunk/dom/ani.js>

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#21413

On 21.09.2013 08:33, jonas.thornvall@gmail.com wrote:
> This function starts a draw/plot sequense using a function call in a form.
>
> function initanime()
> {
>     size = 0;
>     start = 0;
>     multip = + 1;
>     run = 1;
>     refresh = setInterval(draw, 0);
> }
>
> This funtion i call to stop the draw/plot also from a form.
>
> function stopanime()
> {
>     clearInterval(refresh);
> }
>
>
> But it seem it is not at all stabile, sometimes it work sometimes not and the
> longer it run the more likely it doesn't and it totally seem to bug out when the values i plot have negative values.

When using animation with canvas you should use neither setInterval nor 
setTimeout as some suggest.

Use requestAnimationFrame and apply a condition:

   var request,
       isPlaying = true;

   function initanime() {
      size = 0;
      start = 0;
      multip = + 1;
      run = 1;

      /// start animation
      request = requestAnimationFrame(draw);
   }

   function draw() {

      ... funky animation stuff here

      if (isPlaying === true)
          request = requestAnimationFrame(draw);
   }

   function stopanime() {
      cancelAnimationFrame(request);
      isPlaying = false;
   }

A frame normally last 16.7 milliseconds (on 60 Hz monitors). You cannot 
achieve this with setTimeout/setInterval as these only takes integer 
values. requestAnimationFrame however is designed for this purpose and 
works at a lower level than the other two. You will be able to sync your 
animation to monito's VBLANK gap which remove frame "jerks".

By using a condition (here flag for demo) you can easily control the 
animtion from outside the loop.

You might need to prefix rAF in some browsers but the latest versions of 
both FireFox and Chrome has been shipped with no need for this.


-- 
Ken Fyrstenberg
Abdias Software
http://abdiassoftware.com/
(remove usenet- from address)

[toc] | [prev] | [next] | [standalone]

#21414

On 21.09.2013 08:33, jonas.thornvall@gmail.com wrote:
> This function starts a draw/plot sequense using a function call in a form.

Forgot to post the link for a so-called poly-fill you can use for 
requestAnimationFrame (just note that the poly-fill uses the name 
requestAnimFrame):
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

setTimeout is a last resort for older browsers. Another thing to be 
aware of with setInterval is that you can risk stacking your calls 
eventually blocking the browser. If your animation loop is expensive and 
uses more than the time budget allow you will add events that never can 
be consumed.

-- 
Ken Fyrstenberg
Abdias Software
http://abdiassoftware.com/
(remove usenet- from address)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web