Question 10871 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Delay before navigation dropdown closes – Jquery

We’re building out a prototype for a website navigation and are struggling to find a solution to a problem we have.

We have tested the navigation prototype with customers and found that customers would accidentally hover over different navigation tabs while already in a dropdown, which would change to a new dropdown unintentionally.

Example of problem (image)

We think a good solution for this is to add a delay timer before the any additional navigation dropdown opens.

So as an example, a user hovers over "A. underwear and sleepwear" then hovers over "B. Activewear", we add a 1 second delay so that (A) will wait 1 second before dissapearing and showing (B). But if the user goes back to (A) in under 1 second then (B) will not open.

I’ve created a screen recording with audio to describe the problem better:
https://www.loom.com/share/7dc9df6299754a4595649b1214da19b5

This is the Jquery code we are using for the hover function:

$("ul#subnav-container li").hover(

      function () {
        // syncWait(1001);
        $(this).addClass("active");      
      },

      function () {
        // syncWait(1000);
        $(this).removeClass("active");       
      }
);

We do not know how to write up the "syncWait" function. Any help is appreciated.

We tried to add a setTimeout function but when hovering on other tabs it would wait 1 second before still showing all the other tabs.

Tags:

2

Answers


  1. 0

    Try setTimeout and clearTimeout

    let entertimer,
  leavetimer,
  show = function() {
    clearTimeout(leavetimer);
    entertimer = setTimeout(() => {
      $(this).addClass("active").siblings().removeClass('active');
    }, 1000);
  },
  hide = function() {
    clearTimeout(entertimer);
    leavetimer = setTimeout(() => {
      $(this).removeClass("active").siblings().removeClass('active');
    }, 1000);
  }
$("ul#subnav-container li").hover(show, hide)
    li.active {
  color: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="subnav-container">
  <li>a</li>
  <li>b</li>
</ul>
    Login or Signup to reply.
  2. 0

    There’s no delay or sleep in Javascript for performance reasons. But you can use setTimeout() instead.

    For example you can create a lock flag in your code:

    let lockCategoryChange = false;

$("ul#subnav-container li").hover(

      function () {
        if (lockCategoryChange) {
          return;
        }

        $(this).addClass("active");

        lockCategoryChange = true;
        setTimeout(() = { lockCategoryChange = false }, 500);
      },

      function () {
        $(this).removeClass("active");       
      }
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search