Javascript 从替换内容中中止AJAX Post

目标：

完成：每5秒通过AJAX post刷新我页面上的一个div

不完整-当刷新的div上的下拉菜单打开时，停止刷新div。当刷新的div上的下拉菜单关闭时，开始刷新

在我当前的代码中，abort_refresh（）函数似乎并没有中止ajax请求。有没有人知道如何让它工作

这是我目前拥有的java脚本代码：

    function refresh_recent() {
        var ajaxFn = $.ajax({
            url : '<?php echo site_url('/dashboard/recent'); ?>',
            type: "POST",
            cache: false,
            data : 'none',
            success: function(data, textStatus, jqXHR)
                {
                    $('#recent').html(data);
                    setTimeout(refresh_recent, 5000);
                }
            });
        return ajaxFn;
    }

    var refresh_object = refresh_recent();


    function abort_refresh() {
        refresh_object.abort();
    }

    function start_refresh() {
        refresh_object = refresh_recent()
    }

函数刷新\u最新（）{
var ajaxFn=$.ajax({
url:“”，
类型：“POST”，
cache:false，
数据：“无”，
成功：函数（数据、文本状态、jqXHR）
{
$（'#recent'）.html（数据）；
setTimeout（刷新时间，5000）；
}
});
返回ajaxFn；
}
var refresh_object=refresh_recent（）；
函数中止_刷新（）{
刷新_object.abort（）；
}
函数启动\u刷新（）{
刷新\u对象=刷新\u最近的（）
}

“刷新内容”JavaScript和HTML

<script type="text/javascript">
    $('.refresh').on('shown.bs.dropdown', function () {
        abort_refresh();
    });

    $('.refresh').on('hide.bs.dropdown', function () {
        start_refresh();
    });
</script>    

    <div class="refresh btn-group">
        <button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#view-modal" data-type="outbound" data-record="<?php echo $value['id'] ?>"><span class="glyphicon glyphicon-search"></span></button>
        <button type="button" class="btn btn-xs btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a data-toggle="modal" data-target="#resend-modal" data-record="<?php echo $value['id'] ?>"><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>Resend</a></li>
          <li class="divider"></li>
          <li><a data-toggle="modal" data-target="#delete-outbound-modal" data-record="<?php echo $value['id'] ?>"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</a></li>
        </ul>
    </div>

$（'.refresh'）.on（'show.bs.dropdown'，函数（）{
中止刷新（）；
});
$（'.refresh'）.on（'hide.bs.dropdown'，函数（）{
开始刷新（）；
});
它失败是因为您没有更新保存Ajax请求的变量<代码>刷新对象

并不总是有最新的请求。另外，您需要取消超时

(function() {

    var refresh_object, timer;

    function refresh_recent() {

        if (refresh_object) return;

        var ajaxFn = $.ajax({
            url : '<?php echo site_url('/dashboard/recent'); ?>',
            type: "POST",
            cache: false,
            data : 'none',
            success: function(data, textStatus, jqXHR)
                {
                    $('#recent').html(data);
                    timer = setTimeout(refresh_recent, 5000);
                    refresh_object  = null;
                }
            });
        refresh_object = ajaxFn;
    }


    refresh_recent();


    function abort_refresh() {            
        if (refresh_object ) { 
            refresh_object.abort();
        }
        window.clearTimeout(timer);
        refresh_object = null;
    }

    function start_refresh() {
        refresh_recent()
    }

    $('.refresh')
        .on('shown.bs.dropdown', abort_refresh)
        .on('hide.bs.dropdown', start_refresh);

}());

（函数（）{
变量刷新对象，定时器；
函数refresh_recent（）{
如果（刷新对象）返回；
var ajaxFn=$.ajax({
url:“”，
类型：“POST”，
cache:false，
数据：“无”，
成功：函数（数据、文本状态、jqXHR）
{
$（'#recent'）.html（数据）；
定时器=设置超时（刷新时间，5000）；
刷新对象=null；
}
});
刷新对象=ajaxFn；
}
刷新_recent（）；
函数中止_刷新（）{
如果（刷新对象）{
刷新_object.abort（）；
}
清除超时（计时器）；
刷新对象=null；
}
函数启动\u刷新（）{
最近更新
}
$（“.refresh”）
.on（'显示.bs.下拉列表'，中止刷新）
.on（'hide.bs.dropdown'，start\u refresh）；
}());

您确实意识到，一旦点击setTimeout（刷新，5000）；它将继续执行每5秒，即使你调用中止它？非常感谢你的回应，这澄清了我的困惑。当然，我现在唯一的问题似乎是，如果我在发布期间不单击下拉菜单，它似乎会创建另一个对象实例并开始双重发布。是否有其他东西触发了

刷新\u recent

？这很有魅力！谢谢你的耐心。