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>');
   });

当鼠标悬停时，此Jquery脚本是等待2秒元素？
如果用户移除鼠标悬停元素，查询仍然会执行运行并执行代码？如果没有，我怎么能停止代码它需要来自sql.php文件数据吗？

Answer 1

当鼠标悬停元素时，这个Jquery脚本是等待2秒吗？

不完全是，一旦用户悬停在元素上，就会启动计时器，并在2秒后执行操作。用户不必保持悬停元素以实现此目的。

如果用户移除鼠标悬停元素，查询仍然会运行并执行代码吗？

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

如果没有如何在sql.php文件数据需要之前停止代码？

将对setTimeout的调用结果捕获到变量（通常称为timerId或类似的变量）中，并在用户停止悬停元素时调用clearTimeout(timerId)。

请参阅以下简化演示。

＆＃13;

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');
});

＆＃13;

.container{
 width:300px;
  height:300px;
  border: 1px solid black
}

＆＃13;

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

＆＃13;

Answer 2

.hover()通常需要两个参数handlerIn和handlerOut函数。由于您只有一个函数，因此在mouse pointer enters the element时会调用它。我的理解是，您在悬停时会在元素旁边显示一些带有加载图标的弹出窗口，这样做很好，因为向用户提供一些视觉反馈会鼓励他留在该元素上。

setTimeout(callback,2000)将在等待最少2秒之后调用该回调（它可能更多 - 不能保证;）但是如果用户离开该元素，您仍然会触发Ajax调用而不跟踪mouseleave事件。因此，将另一个函数传递给hover()，当用户离开元素时将调用该函数。

/* 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
  });

jquery setTimeout关于它的几个问题

2 个答案: