如何在调用js对象的另一个方法后调用另一个方法？

Question

我经常在 jQuery 中看到这样的代码。

$('div').action1().delay(miliseconds).action2();

我可以通过以下代码中的一级操作来实现它。

function $(id) {
   var $ =  document.getElementById(id);

   $.action1 = function() {

   };

  return $;

}

如何编写方法 delay() 和 action2() 以便我可以这样使用它们？

$('div').action1().delay(miliseconds).action2();

Answer 1

你所指的就是所谓的链接。除了延迟用于动画这一事实之外，要记住的关键点是从函数返回 this 。

如果您想了解特定的 jQuery 函数是如何工作的，请查看 removeClass 的代码：

removeClass: function( value ) {
    if ( jQuery.isFunction(value) ) {
        return this.each(function(i) {
            var self = jQuery(this);
            self.removeClass( value.call(this, i, self.attr("class")) );
        });
    }

    if ( (value && typeof value === "string") || value === undefined ) {
        var classNames = (value || "").split(rspace);

        for ( var i = 0, l = this.length; i < l; i++ ) {
            var elem = this[i];

            if ( elem.nodeType === 1 && elem.className ) {
                if ( value ) {
                    var className = (" " + elem.className + " ").replace(rclass, " ");
                    for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
                        className = className.replace(" " + classNames[c] + " ", " ");
                    }
                    elem.className = jQuery.trim( className );

                } else {
                    elem.className = "";
                }
            }
        }
    }

    return this;
},

注意到最后的 return this; 了吗？这允许您调用 $('#myelement').removeClass('highlight').someOtherFunction()，因为在removeClass 末尾，您仍在对 jQuery 对象本身进行操作。

如果您想检查其他功能，请查看 jQuery 的开发版本（未缩小）： http://code.jquery.com/jquery-1.4.2.js

编辑：为了更全面地回答您的问题，您可以编写函数以允许按以下方式链接（在 jQuery 包含之后包含） ：

(function($){
    $.fn.extend({
        action1: function() { return this; },
        action2: function() { return this; }
    })(jQuery);

这本质上是创建您自己的插件。您可以在网上找到很多有关如何执行此操作的教程，或者打开您已经看过的插件。

这是一个简单的教程：http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial" queness.com/post/112/a-really-simple-jquery-plugin-tutorial

Edit2：在创建 jQuery 插件方面没有太深入（因为您的问题一般是关于 javascript 的），我只是想提一下如果你正在做一个 jQuery 插件，你会想要这样做：
返回 this.each(function() {});
所以你的函数对选择器选择的所有元素执行。

Answer 2

.delay() 用于动画

当然还有其他方法可以这样做，但是 jQuery 可以以一种很棒的方式链接。也就是说，如果您不愿意，则不必编写一堆匿名函数或自定义回调。 方便链接！

另一方面，如果您确实想自定义动画的回调，也可以！

$('#foo').slideDown(500, function(){
  alert('foo is visible now!');
});

查看 jQuery Effects API 了解更多信息。

查看 JavaScript 的原生 setTimeout() 也有功能。