[jQuery] Re: Destroy Interval at DOM Object removal
wow, very cool! I'm glad my 'advice' was useful to you! - ricardo On Nov 14, 8:21 am, Pom <[EMAIL PROTECTED]> wrote: > Hi! > > I killed my plugin-idea and rewrote the whole thing and now I have it > working. > > Thanks for your advice, ricardobeat! > > The result can be seen onhttp://www.coolstuff.se/Humunga_Tunga. Open > an image och forward to #4. The code is in product.js. > > Best regards, > Pom
[jQuery] Re: Destroy Interval at DOM Object removal
That's pretty cool. To make it a bit more difficult, why not add vertical movement aswell, and if you did the vertical movement in all angles, you could create a controllable 3D object. Pom wrote: Hi! I killed my plugin-idea and rewrote the whole thing and now I have it working. Thanks for your advice, ricardobeat! The result can be seen on http://www.coolstuff.se/Humunga_Tunga. Open an image och forward to #4. The code is in product.js. Best regards, Pom
[jQuery] Re: Destroy Interval at DOM Object removal
Hi! I killed my plugin-idea and rewrote the whole thing and now I have it working. Thanks for your advice, ricardobeat! The result can be seen on http://www.coolstuff.se/Humunga_Tunga. Open an image och forward to #4. The code is in product.js. Best regards, Pom
[jQuery] Re: Destroy Interval at DOM Object removal
Being a bit more awake right now I realize that's probably one of the
stupidest things I've said on this mailgroup! :D
On Nov 4, 7:48 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> > "And you can't check for the element's
> > existance anywhere within the plugin code because all event handlers
> > have been removed with the element itself."
>
> > I don't really understand this, or it isn't at all what I experience
> > from testing. I have a console.log in the function fired by the timer
> > created by the plugin. It outputs $(this).length, which would be 1
> > since the plugin code attaches itself to each object supplied thru the
> > jQuery object. If assign my rotate-plugin to for example $('#rotate')
> > and then delete that same element, $(this).lenght will still output 1.
> > If I however console.log($('#rotate').lenght) it would respond to the
> > changes in the DOM.
>
> I mean it's useless to put a check inside of 'onmousemove' for example
> because that event will not be fired anymore, as it's owner element
> has been removed from the DOM.
[jQuery] Re: Destroy Interval at DOM Object removal
On Nov 4, 5:54 pm, Pom <[EMAIL PROTECTED]> wrote:
> I wanted to check this on each iteration of the timer. In a perfect
> world the function fired by the timer would check if the element it
> was about to alter is still in the dom. If not, it should clear the
> timer associated with the element.
>
> Having only one timer would kinda make the whole code as a plugin
> useless. I wanted to be able to create multiple instances of the
> plugin on the same page which require one timer for each element.
> Guess I need to make a KYD. :(
Not really. All you need is a timer that triggers 30 times a second
(or whatever is your desired frame rate) and does the job for each of
the elements activated by the plugin. Instead of clearing intervals
for each element, you instead dequeue/de-register/remove it from the
list that the interval is checking.
Like this (sketch):
oneInterval = {
init : function(){
oneInterval.elements = $('nada');
this.int = setInterval(oneInterval.animate,300);
},
stop : function() {
clearInterval(this.int);
},
add : function(el) {
this.elements = this.elements.add(el);
},
remove : function(el) {
this.elements = this.elements.not(el);
},
animate : function() {
oneInterval.elements.animate({'marginLeft':'+=10px'});
}
};
oneInterval.init();
oneInterval.add('div');
then a few seconds later: oneInterval.remove('#one')
You could do the check only every 30 frames or so, saving you from
checking for every call that would certainly affect performance. That
is also possible with separate timers, you would add it inside each
one's interval function.
>
> "And you can't check for the element's
> existance anywhere within the plugin code because all event handlers
> have been removed with the element itself."
>
> I don't really understand this, or it isn't at all what I experience
> from testing. I have a console.log in the function fired by the timer
> created by the plugin. It outputs $(this).length, which would be 1
> since the plugin code attaches itself to each object supplied thru the
> jQuery object. If assign my rotate-plugin to for example $('#rotate')
> and then delete that same element, $(this).lenght will still output 1.
> If I however console.log($('#rotate').lenght) it would respond to the
> changes in the DOM.
I mean it's useless to put a check inside of 'onmousemove' for example
because that event will not be fired anymore, as it's owner element
has been removed from the DOM.
[jQuery] Re: Destroy Interval at DOM Object removal
I wanted to check this on each iteration of the timer. In a perfect
world the function fired by the timer would check if the element it
was about to alter is still in the dom. If not, it should clear the
timer associated with the element.
Having only one timer would kinda make the whole code as a plugin
useless. I wanted to be able to create multiple instances of the
plugin on the same page which require one timer for each element.
Guess I need to make a KYD. :(
"And you can't check for the element's
existance anywhere within the plugin code because all event handlers
have been removed with the element itself."
I don't really understand this, or it isn't at all what I experience
from testing. I have a console.log in the function fired by the timer
created by the plugin. It outputs $(this).length, which would be 1
since the plugin code attaches itself to each object supplied thru the
jQuery object. If assign my rotate-plugin to for example $('#rotate')
and then delete that same element, $(this).lenght will still output 1.
If I however console.log($('#rotate').lenght) it would respond to the
changes in the DOM.
On Nov 4, 5:30 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
> You could attach a flag that the element is in use by the plugin,
> like:
>
> $(this).data('rotate',true);
>
> But in what event or how often would you check for elements with this
> flag to see if they still exist, and how would you access the internal
> interval var? It's a hard task. And you can't check for the element's
> existance anywhere within the plugin code because all event handlers
> have been removed with the element itself.
>
> To achieve this I think you need a new architecture: use a single
> timeout or interval for all elements affected by the plugin, and in
> that function you can check if the element's still there before doing
> it's thing.
>
> On Nov 4, 12:16 pm, Pom <[EMAIL PROTECTED]> wrote:
>
>
>
> > Shorthand of same question.
>
> > How do I identify the DOM-element on which a plugin has been invoked,
> > and how can I tell wheater or not it is still in the DOM or has been
> > removed?- Hide quoted text -
>
> - Show quoted text -
[jQuery] Re: Destroy Interval at DOM Object removal
You could attach a flag that the element is in use by the plugin,
like:
$(this).data('rotate',true);
But in what event or how often would you check for elements with this
flag to see if they still exist, and how would you access the internal
interval var? It's a hard task. And you can't check for the element's
existance anywhere within the plugin code because all event handlers
have been removed with the element itself.
To achieve this I think you need a new architecture: use a single
timeout or interval for all elements affected by the plugin, and in
that function you can check if the element's still there before doing
it's thing.
On Nov 4, 12:16 pm, Pom <[EMAIL PROTECTED]> wrote:
> Shorthand of same question.
>
> How do I identify the DOM-element on which a plugin has been invoked,
> and how can I tell wheater or not it is still in the DOM or has been
> removed?
[jQuery] Re: Destroy Interval at DOM Object removal
Shorthand of same question. How do I identify the DOM-element on which a plugin has been invoked, and how can I tell wheater or not it is still in the DOM or has been removed?
[jQuery] Re: Destroy Interval at DOM Object removal
The code to remove the element is outside the plugin. I figured that the plugin should be able to clear it's Intervals even though it wasn't destroyed by the parent. Where I implement this would be the preferred way to do it. I found a way to get it to work partially, but that spawned another problem. Currently I'm trying to understand the window.setInterval. I just can't figure out on what level this interval is and WHAT it is. For example, if I do the following: var interval = window.setInterval([something, something]); console.log(interval); // outputs a number And if I assign window.setInterval() to "interval" again I now seem to have two instances of an interval which seems also suddenly unclearable. I got the "is element still in the dom"-functionality to work by grabbing the original ID and checking $(element_id).length, but that isn't good enough since I should not rely on an element having an ID that also must be unique, and I don't want to assign a unique ID myself. That just seems improper. The most elegant solution would be if window.setInterval only could be one interval on each unique variable, but they seem to add together and cause interval-havoc if I don't make sure I clear them before reassigning, which I don't know how to do if the parent have deleted the dom-element on which the plugin was assigned. I'm flabbergasted.
[jQuery] Re: Destroy Interval at DOM Object removal
Hi,
I don't see any code removing the element from the DOM, in what line
is it?
One thing I noticed is you're storing values as properties of the
element (lines 32-36), that's the first step to get memory leaks on
IE. Using the data() function to store element data avoids that
problem.
- ricardo
On Nov 3, 2:22 pm, Pom <[EMAIL PROTECTED]> wrote:
> I'm currently creating a project where we need out users to be able to
> browser thru different media types. Currently Images, Video and "360-
> images". Since we are really concearned about the highest availability
> we decided to create the 360-viewer with JavaScript, in the form of a
> jQuery plugin.
>
> The plugin, after some tweaking, turned out to work perfect. However,
> I have trouble releasing the window.setInterval when the div that has
> been applied the image rotator is removed from the DOM.
>
> Here's the plugin in it's full:http://www.pastie.org/306425
>
> Here's the code calling the plugin:http://pastie.org/306434
>
> Please notice that the paste contains two plugins acutally. The
> uppermost is used to disable browser selecting.
>
> At line 56 I'd like to add some code that makes sure the element is
> still in the DOM. I've tried approaching this with $(element).is('*'),
> $(element).lenght, but both reports that the element exists even
> though it has been removed.
>
> If I test with $(element).hasClass it can be accomplished at runtime
> in Firebug, but whenever I add any attributes in the plugin-scope it
> doesnt seem to apply to the DOM itself.
>
> This is my first Plug-in for JQuery, so please feel free to give any
> feedback, including improvements om best practice.
>
> Best regards,
> Pontus
