如何在闭包内部访问“ this”？

Question

I'm very new to JavaScript and jQuery and I'm having trouble with a bit of code.

HTML:

<div class="toggle" style="display: block; width: 200px; height: 200px; background-color: red;">test</div>

JavaScript:

jQuery(document).ready(
    function()
    {
        jQuery(".toggle").on("click", function() {
            console.log("let the toggling begin!");

            jQuery(this).slideToggle(600, function(){ // slide up
                setTimeout(function(){ // wait 4 sec, then slide back down
                    jQuery(this).slideToggle(600)
                }, 4000);
            });
        });
    }
);

So the idea is that you click on the div, it slides up, then 4 seconds later slides back down. It doesn't work.

JSFIDDLE: http://jsfiddle.net/zEqN9/2/

However, if I change the this inside each of the closures to ".toggle" , then it does work.

JSFIDDLE: http://jsfiddle.net/YZxMb/

So clearly the issue is my use of this .

I tried passing this as a parameter into each of the two closure functions, but that gave the error Unexpected token this .

How can I access the this variable from the inner functions?

Answer 1

Create a reference to this in slideToggle function.

 jQuery(document).ready(
    function()
    {
        jQuery(".toggle").on("click", function() {
            console.log("let the toggling begin!");

            jQuery(this).slideToggle(600, function(){ // slide up
                var self = this; // <-- notice this
                setTimeout(function(){ // wait 4 sec, then slide back down
                    jQuery(self).slideToggle(600)
                }, 4000);
            });
        });
    }
);

Answer 2

Use bind to specify a this for a function you expect to call out of context.

var foo = {
    bar: function () {
        setTimeout(function () { // though in a setTimeout
            console.log(this);
        }.bind(this), 0); // binding to `this` here means
    }
};

foo.bar(); // invoking it still has `this` of `foo`

Answer 3

The reason is that for a jQuery event, the context of the function is explicitly set so that this refers to the target element - this is done for you by jQuery. However, the anonymous function for setTimeout doesn't have that context set for you - it gets the default global context, so this refers to the window.

What you need to do is grab a reference to the click event's context, and then use the reference in the timeout:

jQuery(function () {
    jQuery(".toggle").on("click", function () {
        var $this = $(this);

        $this.slideToggle(600, function () { // slide up
            setTimeout(function () { // wait 4 sec, then slide back down
                $this.slideToggle(600);
            }, 4000);
        });
    });
});

However, as pointed out in a comment, this could be written as:

jQuery(function () {
    jQuery(".toggle").click(function () {
        jQuery(this).slideToggle(600).delay(4000).slideToggle(600);
    });
});

Answer 4

var yourThing = jQuery(this);

yourThing.slideToggle(600, function(){ // slide up
     setTimeout(function(){ // wait 4 sec, then slide back down
          yourThing.slideToggle(600)
     }, 4000);
});

Answer 5

Just add this line in your code to understand why:

setTimeout(function(){ // wait 4 sec, then slide back down
      console.log(jQuery(this)); //this one
      jQuery(this).slideToggle(600)
      }, 4000);

Open your console. You will see that, in the setTimeout function, $(this) refers to the window object.

Answer 6

You need a create a referente to this,so when runs the function associate to setTimeout you can pass this reference.

 jQuery(document).ready(
        function()
        {
            jQuery(".toggle").on("click", function() {
                console.log("let the toggling begin!");
                var that = this; // <--- reference to this
                jQuery(this).slideToggle(600, function(){ // slide up
                    setTimeout(function(){ // wait 4 sec, then slide back down
                        jQuery(that).slideToggle(600)
                    }, 4000);
                });
            });
        }
    );