Как сделать задержку при открытии тега details с помощью JQuery?

Question

[Sergey4562]

По некоторым причинам выполнил вертикальное выпадающее меню на сайте с помощью details. При наведении мыши появляется выпадающий список. Но т.к. главных списков меню с подразделами много, есть небольшие неудобства при перемещении мыши. Никак не могу сделать, чтобы меню выпадало только после 1-2 секунд удержания мыши.
JQuery код:

function checkWidth() {
      var windowWidth = $('body').innerWidth(),
          elem = $(".number-bullets"); 
      if(windowWidth < 640){
        $("details").attr("open","true");
      }
      else{
        $(function() {
            $('details').on('mouseover', function() {
              $(this).attr('open', true);
            }).on('mouseout', function() {
              $(this).attr('open', false);
            })
          });
      }
    }
  
    checkWidth();
  
    $(window).resize(function(){
      checkWidth(); 
    });

и HTML

<details>
  <summary class="oral-surgery">Oral surgery</summary>
  <li class="leaf"><a href="services-teeth-extractions.php">Tooth Extraction</a></li>
  <li class="leaf"><a href="wisdom-tooth-extraction.php">Wisdom Tooth Extraction</a></li>
  <li class="leaf"><a href="services-tmj.php">Corrective Jaw Surgery (TMJ)</a></li>
  <li class="leaf"><a href="services-dental-implants.php">Dental Implants</a></li>
  <li class="leaf"><a href="periodontics-surgery.php">Periodontics Surgery</a></li>
</details>

<details>
  <summary class="restauration">Restauration</summary>
  <li class="leaf"><a href="white-filling.php">White Filling</a></li>
  <li class="leaf"><a href="crown-and-bridge.php">Crown and Bridge</a></li>
  <li class="leaf"><a href="implant-crown.php">Implant Crown</a></li>
  <li class="leaf"><a href="inlays-onlays.php">Inlays - Onlays</a></li>
  <li class="leaf"><a href="Tooth-colored-fillings.php">Tooth-Colored- Fillings</a></li>
  <li class="leaf"><a href="night-guard.php">Night Guard</a></li>
  <li class="leaf"><a href="services-root-canal-treatment.php">Root Canal Treatment</a></li>
  <li class="leaf"><a href="holistic-amalgam-removals.php">Holistic Amalgam Removals</a></li>
</details>

Answer 1

[Sergey4562]

Решил сам, спасибо за активную помощь :)

function checkWidth() {
      var windowWidth = $('body').innerWidth(),
          elem = $(".number-bullets"); // лучше сохранять объект в переменную, многократно чтобы не насиловать 
                                      // страницу для поиска нужного элемента
      if(windowWidth < 640){
        $("details").attr("open","true");
      }
      else{
        $(function() {
          $("details").on("mouseenter mouseleave", function(event) {
            window.clearTimeout(timer);
            var that = this;
            if (event.type == "mouseenter") {
              timer = window.setTimeout(function() {
                 that.setAttribute('open', true)
              }, pause)
            } else this.removeAttribute('open')
          });
          });
      }
    }
  
    checkWidth(); // проверит при загрузке страницы
  
    $(window).resize(function(){
      checkWidth(); // проверит при изменении размера окна клиента
    });

    var timer, pause = 400;