javascript - jquery setTimeout 关于它的几个问题

Question

我有一个带有标签系统的网站，类似于在 stackoverflow 上工作的系统。我的问题是:

    $("#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. 这个 Jquery 脚本是在鼠标悬停时等待 2 秒元素？
2. 如果用户将鼠标悬停在元素上，查询仍然会发生 运行并执行代码？如果没有，我怎样才能停止之前的代码 它需要来自 sql.php 文件的数据吗？

Answer 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?

如上所述，该操作将在首次悬停元素后 2 秒执行，无论用户此后执行什么操作。

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

将 setTimeout 的调用结果捕获到变量中(通常称为 timerId 或类似变量)，并在以下情况下调用 clearTimeout(timerId)用户停止将鼠标悬停在元素上。

请参阅以下简化演示。

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>