Question

我正在尝试修改一些现有代码，但无法正常运行。当鼠标超过div＃＆＃34;我的＆＃34;我需要setinterval停止，当鼠标没有超过div时，恢复设置的间隔。我一整天都在尝试和尝试这项工作，但似乎无法做到这一点。任何帮助将不胜感激。谢谢。

jQuery(document).ready(function(){

// check all
jQuery(this).on('click', '#selectall', function() {
  jQuery('.checkbox').prop('checked', jQuery(this).is(":checked"));
});

    // ajax
    jQuery(this).on('submit', 'form[name="dispatchform"]', function(){
        jQuery.ajax({
            url: jQuery(this).attr('action'),
            data: jQuery(this).serialize(),
            type: 'post',
            beforeSend: function(){jQuery('body').css('opacity', '0.5');},
            success: function(data) {
                var response = jQuery(data).find('#dispatchTable').html();
                jQuery('#dispatchTable').html(response);

                //message
                var msg = jQuery(data).find('td.messageStackError, td.messageStackSuccess').html();
                jQuery('#msg').css({
                    'padding': '10px',
                    'text-align': 'center',
                    'font-size': '12px',
                    'background-color': 'darkkhaki',
                    'margin': '10px 0',
                    'color': '#fff'
                }).html(msg);
            },
            complete: function(){jQuery('body').css('opacity', '1');}
        });
        return false;
    });


          setInterval(function() {
      jQuery.ajax({
            url: jQuery(this).attr('action'),
            data: jQuery(this).serialize(),
            type: 'post',
            beforeSend: function(){jQuery('body').css('opacity', '0.5');},
            success: function(data) {
                var response = jQuery(data).find('#dispatchTable').html();
                jQuery('#dispatchTable').html(response);

                //message
                var msg = jQuery(data).find('td.messageStackError, td.messageStackSuccess').html();
                if(msg !== undefined) {
                jQuery('#msg').css({
                    'padding': '10px',
                    'text-align': 'center',
                    'font-size': '12px',
                    'background-color': 'darkkhaki',
                    'margin': '10px 0',
                    'color': '#fff'
                }).html(msg);
                }
            },
            complete: function(){jQuery('body').css('opacity', '1');}
        });
    }, 15000);

});

Answer 1

我不确定你到底想要发生什么......

我的意思是我在该代码中的任何地方都看不到div#mine，因此我不知道它是否属于其中一个或外部如果在特殊情况下，所有这些，或者在室外，也在室内......

......无论如何，一般的想法如下：

var doSomethingId;

function doSomething ( ) { }

var mine = document.querySelector("#mine");
mine.addEventListener("mouseover", function () {
    doSomething();
    doSomethingId = setInterval(doSomething, 10000);
});

mine.addEventListener("mouseout", function () {
    clearInterval(doSomethingId);
});

除此之外，还有很多其他内容。 jQuery也不小。

关键是保存ID（var id = setInterval(/*...*/);）并使用它来清除间隔（clearInterval(id);）。
你没有重新开始＆＃34;间隔;相反，你再次调用id = setInterval(...);，以便id现在是新的间隔，所以你可以停止新的间隔。

编辑：

这真是一个＆＃34; XY＆＃34;问题...
也就是说，您正在寻找一个解决问题的解决方案，而这个问题并不是您问题的根源，而是一个问题，这是一个在根之上的分支。

一个简单的例子：
大多数表格，我通过Tab键填写，通过字段标签，然后点击ENTER，或者向下跳到提交按钮并点击ENTER

在这种情况下（使用键盘/触摸屏/等的人），您现在仍然会遇到您所面临的问题。

那就是说，如果你愿意稍微重构，解决方案可以是相同的。

我的意思是，而不是你的`setInterval（function（）{jQuery./.../}）;

你想做的事情就像;

var shouldUpdate = true,
    form  = this,
    $mine = jQuery("#mine");

$mine.on("mouseover", function () { shouldUpdate = false; });
$mine.on("mouseout",  function () { shouldUpdate = true;  });

// whole setInterval(function () { jQuery.ajax(...); }); copied and pasted here, plus the `if`
function submitForm () {
    if (!shouldUpdate) { return; }
    jQuery.ajax(/* ... */);
}

var submitId = setInterval(submitForm, 15000);
// clearInterval(submitId); -- just remember to set the new ID, if you restart it

正如你所看到的，我现在并不需要启动和停止间隔如果我处于任何我不应该更新状态的状态，我会收到if。（实际上，如果你开始编辑一个字段，这应该更进一步，并中止已经发生的任何XHR调用。）

Answer 2

基于this post我猜你想要完成这样的事情吗？

<!DOCTYPE html>
<html>
<head>
<style>
#mine{
    width:200px;
    height:200px;
    border:1px solid red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Counter:</p>
<div id="mine"></div>
<div id="counter">
</div>

<script>

jQuery(document).ready(function(){
    $( "#mine" )
    .mouseout(function() {
        enableCounter();
    })
    .mouseover(function() {
        disableCounter();
    });
});

var count=10;
var counterEnabled = true;
var counter=setInterval(timer, 1000); //run every 1 second

function timer(){
  if (counterEnabled)
    count--;

  if (count == 0){
     alert('execute submit here!');
     count = 10;
  }

  $('#counter').text(count);
}

function enableCounter(){
    counterEnabled = true;
}
function disableCounter(){
    counterEnabled = false;
}
</script>

</body>
</html>

鼠标悬停时清除setinterval并在鼠标输出时恢复

2 个答案:

编辑：