Question

我有一段效果很好的代码，但我无法理解其中的一部分，所以任何帮助都会受到赞赏。

在以下函数中， bind(this) 函数在代码末尾执行什么操作？我搜索了很多SO和JQuery文档，但找不到这样的用法。 bind()的所有用法都试图将一个函数连接到一个事件，但是这里的bind在一个函数之后调用并传递一个JQuery对象（在这种情况下是一个img标记）。提前致谢。

function refreshCaptcha() {
    var currCaptcha = $('#captcha-div img');

    currCaptcha.animate({
        opacity: 0.3
    }, 300);

    $.getJSON("/captcha.json", function (data) {
        var src = $("#captcha-template").html();
        var template = Handlebars.compile(src);
        var newSrc = template(data);
        var srcDom = $(newSrc);

        srcDom.eq(0).css('opacity', 0).load(function() {

            currCaptcha.animate({
                opacity: 0
            }, 250, function() {
                $("#captcha-div").html(srcDom);

                $(this).animate({
                    opacity: 1
                }, 250);

            }.bind(this));
        });
    });
}

Answer 1

bind创建一个新函数，在调用时，将其this值设置为传递的第一个参数。因此，在这种情况下，animate回调在调用时将其上下文设置为srcDom.eq(0)。

    srcDom.eq(0).css('opacity', 0).load(function() {

        // In here, the value of "this" is srcDom.eq(0)

        currCaptcha.animate({
            opacity: 0
        }, 250, function() {
            $("#captcha-div").html(srcDom);

            $(this).animate({
                opacity: 1
            }, 250);

        }.bind(this)); /*When that callback is invoked, all 
                         occurrences of "this" inside it will refer 
                         to srcDom.eq(0)*/

    });

有关此here

的更多信息

在函数之后调用JQuery.bind（）

1 个答案: