0

我有一个 jquery ajax 函数：

function posts()
{
 pfunc = $.ajax({
         url: 'backend/posts.php',
         success: function(data) {
            $('#posts').html(data);
            $('#posts').fadeIn(2000);
            setTimeout(posts,2000);
        }
        });
}
posts();

我想在用户悬停在 div 'Posts' 上时停止该功能，并在用户停止悬停在该 div 上时恢复。有什么办法我可以做到这一点。

谢谢

4

5 回答 5

2

干得好 ：）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function posts()
{
 pfunc = $.ajax({
         url: 'backend/posts.php',
         success: function(data) {
            $('#posts').html(data);
            $('#posts').fadeIn(2000);
            timer = setTimeout(posts,2000);

        }
        });
}
posts();
$(document).ready(function(){
$('#posts').hover(function(){clearTimeout(timer);}, function(){setTimeout(posts,2000);});
});
</script>
<div id = 'posts'></div>

基本上，我在#post div 中添加了一个 mouser-over 和 mouse-out 事件处理程序，它们将分别清除和重置超时。

于 2012-08-10T04:16:40.263 回答
0

你可能想阻止 ajax 函数运行你正在寻找的东西被称为

    var pfunc = $.ajax({
             url: 'backend/posts.php',
             success: function(data) {
                $('#posts').html(data);
                $('#posts').fadeIn(2000);
                setTimeout(posts,2000);
            }
        });

更多关于悬停事件

$("idofyourdiv").hover(
  function () {
   pfunc.abort();
  },
  function () {
    pfunc();
  }
);
于 2012-08-10T04:01:55.200 回答
0

首先，我会像这样构建您的基本代码：

var timer = null;
var request = null;

function posts() {
 request = $.ajax({
   url: 'backend/posts.php',
   success: function(data) {
     $('#posts').html(data).fadeIn(2000);
     timer = setTimeout(posts, 2000);
   }
 });
}

posts();

接下来，要清除计时器，clearTimeout()请在timer对象上运行。timer存储你的超时函数的 id，当你尝试清除它时它可能不存在，所以像这样安全地清除它：

if (timer !== null) {
  clearTimeout(timer);
}

最后，您应该中止 AJAX 请求，所以只需添加它：

if ((timer !== null) && (request !== null)) {
  clearTimeout(timer);
  request.abort();
}
于 2012-08-10T04:09:32.617 回答
0

这将检查您的 div 是否被悬停。如果是真的，ajax 调用将被取消。

尽量不要修改太多代码：

function posts()
{
 pfunc = $.ajax({
         url: 'backend/posts.php',
         beforeSend: function(){
             if($("#posts").is(":hover")){
                return false;
             }
         },
         success: function(data) {
            $('#posts').html(data);
            $('#posts').fadeIn(2000);
            setTimeout(posts,2000);
        }
        });
}
posts();
于 2012-08-10T04:14:11.000 回答
0

javascript 不是多线程的，所以你不能阻止一段代码运行。如其他答案所述，您可以在 ajax 请求上调用 abort ，但这不会停止任何代码，它只是中止请求。而且我什至不确定在用户停止悬停时再次发出请求时中止请求是否明智。我会让请求通过并检查响应中的悬停状态。如果悬停状态与您的条件不匹配，则缓冲响应并等待用户停止悬停，然后继续执行。类似于以下内容...

var hovering = false;
var onResponse = null;

$('.Posts').mouseover(function() {
    hovering = true;
});

$('.Posts').mouseout(function() {
    hovering = false;
    onResponse && onResponse();
});

function posts() {
 pfunc = $.ajax({
         url: 'backend/posts.php',
         success: function(data) {
                        onResponse = function() {
                            if(hovering) return;
                            $('#posts').html(data);
                            $('#posts').fadeIn(2000);
                            setTimeout(posts, 2000);
                            onResponse = null;
                        };
                        onResponse();
        }
        });
}

posts();
于 2012-08-10T04:27:29.397 回答