CODEWITHSUNDEEP
javascriptjquery
Baruch Belete
Baruch Belete

Reputation: 62

jquery setTimeout few questions about it

i have a website with tags system like kind of the system that work on stackoverflow. my questions about it is:

    $("#area1 ul li").hover(function(){
        var width= $(this).offset();
        $(".flyout").css({"top":width.top+19,"left":width.left});
        $(".flyout").toggle();
        setTimeout(function() {
          $.ajax({ 
            url: web + "sources/queans/sql.php", type: "POST",
            data: { 
               action: "taginfo",
               tag: $(this).text(),
               token: t, 
               ajax: "1" 
            },
            success: function (output) {
              $(".flyout").html(output);
            }
          });
        }, 2000);
     $(".flyout").html('<center><img style="margin-top:20px;"  src="http://www.cloudynights.com/public/style_images/master/ajax_loading.gif" /> </center>');
   });
  1. Do this Jquery script is wait 2 seconds while the mouse are hover the element?
  2. if user remove the mouse hover the element do the query will still running and execute the code? if no how can i stop the code before it require from sql.php file data?

Upvotes: 0

Views: 84

Answers (2)

Arkantos
Arkantos

Reputation: 6608

.hover() usually takes two arguments, handlerIn and handlerOut functions. As you have only one function, it will be invoked when the mouse pointer enters the element. My understanding is that you're displaying some pop-up next to element with some loading icon on hover, that's good because giving some visual feedback to the user encourages him to stay on that element.

setTimeout(callback,2000) will invoke that callback after waiting for minimum 2sec (it can be more - no guarantee on that ;)) but if the user leaves the element you're still firing the Ajax call without tracking that mouseleave event. So pass another function to hover() which will be invoked when the user leaves the element.

/* two variables outside hover scope to 
   hold reference to setTimeout & Ajax call*/
var timer, ajaxRequest;
$("#area1 ul li").hover(function(){
        var width= $(this).offset();
        $(".flyout").css({"top":width.top+19,"left":width.left});
        $(".flyout").toggle();
       timer = setTimeout(function() {
         ajaxRequest = $.ajax({ 
            url: web + "sources/queans/sql.php", type: "POST",
            data: { 
               action: "taginfo",
               tag: $(this).text(),
               token: t, 
               ajax: "1" 
            },
            success: function (output) {
              $(".flyout").html(output);
            }
          });
        }, 2000);
     $(".flyout").html('<center><img style="margin-top:20px;"  src="http://www.cloudynights.com/public/style_images/master/ajax_loading.gif" /> </center>');
   }, 
  function(){
    // second callback to handle mouseleave
    if(typeof ajaxRequest !== 'undefined'){
        // abort the ongoing Ajax call
        ajaxRequest.abort();
    }else if(typeof timer !== 'undefined'){
       // timeout callback is not invoked yet, so clear it
       clearTimeout(timer);
    }
   // show some message in flyout or close the popup directly
  });

Upvotes: 1

Jamiec
Jamiec

Reputation: 136094

Do this Jquery script is wait 2 seconds while the mouse are hover the element?

Not exactly, once a user has hovered over the element, a timer is started and 2 seconds later the action is performed. The user does not have to remain hovering the element for this to happen.

if user remove the mouse hover the element do the query will still running and execute the code?

As specified above, the action will execute 2 seconds after first hovering the element, regardless of what the user does thereafter.

if no how can i stop the code before it require from sql.php file data?

Capture the result of the call to setTimeout into a variable (commonly called timerId or similar), and call clearTimeout(timerId) when the user stops hovering the element.

See the following simplified demo.

var timerId;

$('.container').hover(function(){
    $('.message').text('Hover has been started, background will change in 5 seconds. Mouse out to cancel');  
    var $this = $(this);
    timerId = setTimeout(function(){
      $this.css('background-color','red');  
    },5000);
  },
  function(){
    clearTimeout(timerId);
    $('.message').text('Action cancelled');
});
.container{
 width:300px;
  height:300px;
  border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div>Hover over me</div>
  <div class="message"></div>
</div>

Upvotes: 2

Related Questions