Могу ли я хранить события 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

Может, как-то так?

const list = $("#container").children();
let cnt = 0;
const fader = () => { 
  if (cnt>=list.length) return; 
  $(list[cnt]).fadeIn().delay(3000).fadeOut(fader); cnt++;
};
fader();

.fade { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="delete fade">Del</div>
  <div class="auto fade">Auto</div>
  <div class="show fade">Show</div>
</div>

Answer 2

Вы делаете это путем написания многократно используемой функции:

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

Затем, чтобы использовать ее, вы передаете в нее del:

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

Live Example (с более короткой задержкой):

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>

---

Если вы хотите избежать прямой передачи обратных вызовов, вы можете использовать нативные обещания или объект jQuery Deferred. Вот плагин, который возвращает обещание Deferred:

$.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
});

Live Example (с более короткимзадержка):

$.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>