Problem with object literal - return closure

Question

I have a module with different methods One of the methods call other method on setTimeout and I need to pass some values to the second method which is called

first I did this

transitSlide: function() {
        var left = parseInt(this.$ul.first().css('left')),
        newLeft = parseInt(left) + 100 ,
        index = (newLeft / 100),
        bool = (newLeft <= (this.slideShow.length - 1) * 100); // this is always TRUE

        this.$a.removeClass();
        this.$ul.addClass('fade');

        setTimeout(this.changeSlide.bind(this), 400);


        return bool; // I need to pass newLeft variable too !!!
}

changeSlide() {
    if (this.transitSlide) {
        alert('true') // this works!
    } else {
        alert('false')
    }
}

but I need to pass more values then I did this

transitSlide: function() {
        var left = parseInt(this.$ul.first().css('left')),
        newLeft = parseInt(left) + 100 ,
        index = (newLeft / 100);

        this.$a.removeClass();
        this.$ul.addClass('fade');

        setTimeout(this.changeSlide.bind(this), 400);

        return  {
        direction: (newLeft <= (this.slideShow.length - 1) * 100) ? true : false, // this is always TRUE
        // direction: true // also doesnt work !!!
        newLeft: newLeft
        }
}

changeSlide() {
    if (this.transitSlide.direction) {
        alert('true')
    } else {
        alert('false') // this doesnt work!
    }
}

but it doesnt return true to the second method even when I put simply true value then I found out I should () invoke it then I wrote

transitSlide: function() {
        var left = parseInt(this.$ul.first().css('left')),
        newLeft = parseInt(left) + 100 ,
        index = (newLeft / 100);

        this.$a.removeClass();
        this.$ul.addClass('fade');

        setTimeout(this.changeSlide.bind(this), 400);

        return  {
        direction: (newLeft <= (this.slideShow.length - 1) * 100) ? true : false, // this is always TRUE
        newLeft: newLeft
        }
}

changeSlide() {
        if (this.transitSlide().direction) {
                alert('true') // this works! but setTimeout call it over and over !!!
        } else {
                alert('false')
        }
}

but setTimeout make it run over and over (infinitive loop)

what can I do in this situation ? How can I pass these values and access them in second function without invoking it

Answer 1

using apply() method to pass both parameters and this keyword

transitSlide: function() {
    var left = parseInt(this.$ul.first().css('left')),
        newLeft = parseInt(left) + 100 ,
        index = (newLeft / 100),
        direction = (newLeft <= (this.slideShow.length - 1) * 100);


    this.$a.removeClass();
    this.$ul.addClass('fade');

    setTimeout(this.changeSlide.apply(this, [direction, newLeft]), 400);

},

changeSlide(direction, newLeft) {
    if (direction) {
        alert(true)
    } else {
        alert(false)
    }
},