Chain Unexpectedly BREAKS! :(

[RickyYoder]

Live Code In Action

I’m making a nice DOM manipulation library with pure JavaScript.
My goal is to have chaining to maximum, but for some reason the chain just breaks and the last method executed returns “undefined” when I have clearly added “return this;” at the end of the function.

I’m trying to make the library so that it works through “threads”. Every instance of this library has its own queue for methods.

If a method for a single thread is currently executing, then the other methods trying to execute will be stored into an array; the queue.

But if I have a nice long chain like this exmaple:

thread.wait(500).log("test").wait(500).log("test")….

Or what’s in this Pen I made….

The last few methods never get executed. The chain just gets cut off and I get an error in the console.

I have tried my best to explain what’s going on in comments…but if you wanna read the issue ASAP here:

            SKELETAL STRUCTURE OF METHOD:

            this.methodName = function(parameters...){
                if(this.processing) this.queue.push(function(){ths.methodName(parameters...);});
                else{
                    this.processing = true;
                    //do something

                    next();
                    return this;
                }
            }

            NOTES: 

            -"ths" points to the object instance.
            -"this.processing" is a boolean value. If true, then add method to queue. If not, execute it and set "this.processing" to "true" so that all other methods preceding it are queued.
            -"next()" checks for and executes the first method in the queue if it exists.

            ================================
            Try doing a long chain like this:

            thread.wait(500).log("test").wait(500).log("test")

            > "TypeError: Cannot read property 'wait' of undefined"

            The second "wait" method and the second "log" method are never executed. The chain just breaks.

Help would GREATLY be appreciated. I just have no clue what’s going on and this seems like a great opportunity to learn from my mistake(s).

Thank you for your answer(s) ahead of time!

[Chromawoods]

So when examining this in the console, we can see that it is the css method that returns undefined. Why? Well if you check the code, you will see that it actually doesn’t return the object in every case. Look at the very first if-statement; it pushes a function into the queue but it doesn’t return this.

Instead of returning this in every if-block, you could just stick it into the end of the css method, that way you know that it will return properly.

I’m making a nice DOM manipulation library with pure JavaScript

Are you doing this as a learning experience or is it a serious project? Just considering your health and well-being here.. ;)

[RickyYoder]

It’s kind of a learning experience and a serious project. I like jQuery, but it’s got all the bells and whistles for animation, and I LOVE to see how small and efficient I can make my own code. Like a personal challenge.

That’s why I wanted to make a library that animates through CSS transitions. And I use transitions over animations because transitions have more support for Opera and Android.

In addition to smaller file size, I believe that the whole “threading” concept is something that jQuery doesn’t have.

For example, if I say
var thread = $(document.body)

and

var thread2 = $(document.body)

I can have these two threads running their own queues and executing at different times. I think it’s pretty neat.

Everything seems to be working fine now. I can have endless chains for threads! Thank you! I completely overlooked the fact that if something was already running that I didn’t actually return the instance–just pushed to the queue.
This is awesome!

[Author]

Posts