title: How to make setTimeout activate on last time a Toggle is clicked?
body: <p>I'm using a .slideToggle to show a div once an image is clicked. I want the div to disappear 10 seconds after the last time the toggle is clicked. The problem is that if I click the image a few times, the duration is 10 seconds after the first click and not the last. If you view the fiddle (I used a shorter duration for testing) and click the image a few times you will see what I mean.</p>
  
  <p>Does anyone have any idea how I can get this working as desired? Any help would be greatly appreciated!</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/7fy536nv/" rel="nofollow noreferrer">https://jsfiddle.net/7fy536nv/</a></p>
  
  <p>Requirements...</p>
  
  <ul>
  <li>The div should show for 10 seconds then disappear </li>
  <li>The div will disappear if the image is clicked again</li>
  <li>The div will disappear if something outside the div is clicked</li>
  </ul>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="box-new"&gt;
      &lt;a href="box-link" id="box-link"&gt;
          &lt;img src="https://dummyimage.com/100x60/ff0000/fff.png"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="empty-box"&gt;jkhsahg akjfhsajk fhas jklsad flkasd hfjkashd fjka sdkjfh adskjfhs dakjfh kafh sdah dhjaf&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body, html {
      margin: 0;
  }
  
  #empty-box {
      display: none;
      position: absolute;
      background: #000;
      top: 60px;
      width: 240px;
      padding: 20px;
      left: 0;
      color: #fff;
      text-align: center;
      font-family: "open sans", "arial";
      font-size: 14px;
      font-weight: 600;
      line-height: 18px;
      z-index: 1;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('#box-link').click(function(event){
      event.stopPropagation();
      $("#empty-box").slideToggle(400);
      setTimeout(function() { 
          $("#empty-box").slideUp(); 
      }, 5000);
      return false;
  });
  $("#empty-box").on("click", function (event) {
      event.stopPropagation();
  });
  $(document).on("click", function () {
      $("#empty-box").slideUp(400);
  });
  </code></pre>