Question

我有一个jquery ajax函数：

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

我希望当用户将鼠标悬停在div'帖子'上时停止该功能，并在用户停止悬停在该div上时恢复。我有什么方法可以做到这一点。

由于

Answer 1

你走了:)）

<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事件处理程序，它们将分别清除和重置超时..

Answer 2

你可能想要阻止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();
  }
);

Answer 3

首先，我将基本代码结构如下：

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

Answer 4

这个将检查你的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();

Answer 5

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();

当用户将鼠标悬停在div上时，Jquery停止功能

5 个答案: