Męczenie elementu JS

Question

Witam, jak zrobić żeby nie dało się męczyć elementu (rozwijane menu przy użyciu Jquery) na stronie https://aurolia-css.github.io jest menu i tam jest np. link "Forms" po kliknięciu w niego kilka razy zaczyna on się rozwijać i zwijać tak kilkanaście razy. szukałem i szukałem i nic nie znalazłem jak sobie z tym poradzić (wiem że Jquery nadaje kilka razy tą samą klasę ale jak tego uniknąć). Oto Kod (jakby ktoś potrzebował)

$(function(){
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var link = this.el.find('.link');
link.on('click', {el: this.el, multiple: this.multiple},this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if(!e.data.multiple){
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
}
}
var accordion = new Accordion($('#accordion'), false);
});

 

Answer 1

To nic innego jak kolejkowanie zapytania do przeglądarki. Klikasz 10 razy na menu w bardzo krótkim odstępie czasu. Zamiast rozwinąć się raz i zależnie od konfiguracji w skrypcie, zawinąć się też raz. To zamiast tego rozwinie się 10 razy i zwinie też 10. Aby temu zapobiec możesz skorzystać (jeśli już korzystasz z JQuery) z funkcji .clearQueue().finish() i stop().

// ...
Accordion.prototype.dropdown = function(e) {

var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.clearQueue().finish();
$next.stop();
// ...

Wszystko lub prawie wszystko jest do znalezienia w wyszukiwarce np. DuckDuckGo, wystarczy wpisać taką frazę m.inn. prevent queue on event JQuery.

Comments

Dziękuje działa, szukałem w (Kochanym) google i nie znalazłem przynajmniej.

---

A i jeszcze, kiedy znowu "katuje" ten element to animacja zeruje się do początku (a potem kończy) chciałbym żeby powróciła jak po normalnym kliknięciu a nie zresetowała się, nie wiem jak to naprawić znów.

---

Zamiast tego

$next.clearQueue().finish();

napisz tak

$next.clearQueue();

---

nie pomyślałem że ".finish" to winowajca ... Dziękuje jeszcze raz

Answer 2

Throttling / debouncing?

Comments

Przynajmniej nic nie zrozumiałem

---

Czego konkretnie nie rozumiesz? Przeczytałeś artykuł?

---

Problem rozwiązany już. Zapomniałem zamknąć tematu.