jquery - 我可以将 jQuery 事件存储在变量中吗？

Question

我想将两个或多个事件存储在一个变量中，例如元素选择器。
或者 - 还有其他方法可以做到这一点吗？让我知道。

我知道的方式:

let del = $('.delete');
let auto = $('.auto');
let show = $('.show');

del.fadeIn().delay(3000).fadeOut(function() {
  auto.fadeIn().delay(3000).fadeOut(function() {
    show.fadeIn().delay(3000).fadeOut();
  });
});

<div style="display: none" class="delete">delete</div>
<div style="display: none" class="auto">auto</div>
<div style="display: none" class="show">show</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但我想要这样的东西:

let envent = fadeIn().delay(3000).fadeOut(); 

del.envent {
  auto.envent {
    show.envent;
  };
};

Answer 1

您可以通过编写可重用的函数来做到这一点:

function mySequence(el, callback) {
    return el.fadeIn().delay(3000).fadeOut(callback);
}

然后要使用它，请将 del 传递给它:

mySequence(del, function() {
    // Do the next thing
});

实例(延迟较短):

function mySequence(el, callback) {
    return el.fadeIn().delay(300).fadeOut(callback);
}

let del = $('.delete');
let auto = $('.auto');
let show = $('.show');

mySequence(del, function() {
    mySequence(auto, function() {
        mySequence(show);
    });
});

<div style="display: none" class="delete">delete</div>
<div style="display: none" class="auto">auto</div>
<div style="display: none" class="show">show</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果你愿意，你还可以做一个小的 jQuery 插件:

$.fn.mySequence = function(callback) {
    return this.fadeIn().delay(3000).fadeOut(callback);
};

然后要使用它，您可以像使用任何其他 jQuery 函数一样使用它:

del.mySequence(function() {
    // Do the next thing
});

实例(延迟较短):

$.fn.mySequence = function(callback) {
    return this.fadeIn().delay(300).fadeOut(callback);
};

let del = $('.delete');
let auto = $('.auto');
let show = $('.show');

del.mySequence(function() {
    auto.mySequence(function() {
        show.mySequence();
    });
});

<div style="display: none" class="delete">delete</div>
<div style="display: none" class="auto">auto</div>
<div style="display: none" class="show">show</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<小时/>

如果您想避免直接传递回调，您可以使用 native Promises 或 jQuery 的 Deferred 对象。这是一个返回 Deferred promise 的插件:

$.fn.mySequence = function() {
    var d = $.Deferred();
    this.fadeIn().delay(3000).fadeOut(d.resolve.bind(d));
    return d.promise();
};

然后要使用它，您可以像使用任何其他 jQuery 函数一样使用它:

del.mySequence()
.then(function() {
    // Do the next thing
});

实例(延迟较短):

$.fn.mySequence = function() {
    var d = $.Deferred();
    this.fadeIn().delay(300).fadeOut(d.resolve.bind(d));
    return d.promise();
};

let del = $('.delete');
let auto = $('.auto');
let show = $('.show');

del.mySequence()
.then(function() {
    return auto.mySequence();
})
.then(function() {
    return show.mySequence();
});

<div style="display: none" class="delete">delete</div>
<div style="display: none" class="auto">auto</div>
<div style="display: none" class="show">show</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>