Как вызвать метод объекта 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.

Если вы хотите изучить другие функции, ознакомьтесь с версией разработки (unminified) 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

Edit2: не слишком углубляясь в создание плагинов jQuery (поскольку ваши вопросы касаются javascript в целом), я просто хотел упомянуть, что если вы создаете плагин jQuery, вам нужно будет: return this.each(function() {});
поэтому ваша функция выполняет все элементы, выбранные селектором.

Answer 2

.delay() используется для анимации

Конечно, есть и другие способы сделать это, но jQuery потрясающим образом. То есть вам не нужно писать кучу анонимных функций или пользовательских обратных вызовов, если вы этого не хотите. Удобство в цепочке!

С другой стороны, если вы действительно хотите настроить обратные вызовы анимаций, вы можете!

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

Обратитесь к API эффектов jQuery для получения дополнительной информации.

Также может быть полезно взглянуть на встроенную в JavaScript функцию setTimeout().