使用构造函数添加鼠标悬停延迟

Question

我有一个使用 class 构造函数用 JS 构建的导航。 这是 mouseover/mouseout 功能的代码

export default class MeganavItem {
    constructor(element, meganav) {
        this.element = element;
        this.meganav = meganav;

        this.content = element.querySelector(selectors.content);

        this.menus = Array
            .from(element.querySelectorAll(selectors.menus))
            .map(menu => new MeganavMenu(menu, this));

        this.attachEvents();
    }

    attachEvents() {
        this.element.addEventListener('mouseover', e => this.openContent(e));
        this.element.addEventListener('mouseout', e => this.closeContent(e));
    }

    openContent() {
        this.content.setAttribute('aria-hidden', false);
    }

    closeContent() {
        this.content.setAttribute('aria-hidden', true);
    }
}

但是，我需要将鼠标悬停延迟 100 毫秒并且不确定如何在 attachEvents function 中执行此操作？

Answer 1

我相信您可以使用setTimeout来延迟：

export default class MeganavItem {
    constructor(element, meganav) {
        this.element = element;
        this.meganav = meganav;
        this.openning = false; // add a flag here to prevent multiple triggers.

        this.content = element.querySelector(selectors.content);

        this.menus = Array
            .from(element.querySelectorAll(selectors.menus))
            .map(menu => new MeganavMenu(menu, this));

        this.attachEvents();
    }

    attachEvents() {
        // Note: the mouseover listener is rewritten
        this.element.addEventListener('mouseover', e => {
          if (!this.openning) {
            this.openning = true;
            window.setTimeout(() => {
              this.openContent(e);
              this.openning = false;
            }, 100);
          }
        });
        this.element.addEventListener('mouseout', e => this.closeContent(e));
    }

    openContent() {
        this.content.setAttribute('aria-hidden', false);
    }

    closeContent() {
        this.content.setAttribute('aria-hidden', true);
    }
}