Javascript Ajax setInterval被执行两次，用于处理通知

首先，让我解释一下。我有一个页面来监视我的用户。在这个页面中，我可以在一个表上看到我的用户的所有请求，我也可以看到服务器上的请求总数。我的问题是，当有新的请求时，我如何发出通知。我想做一个通知，比如大窗口弹出的“新请求来了”和一个将播放的音乐音调

这是我的代码： 主页

<!-- start: Header -->


<div class="container-fluid-full">
    <div class="row-fluid">
        <noscript>
        <div class="alert alert-block span12">
            <h4 class="alert-heading">Warning!</h4>
            <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
        </div>
        </noscript>

        <!-- start: Content -->


        <!--First indicator-->
        <marquee>Belum Diterima: <span id="request_belum_terima"><?php
                if ($request_belum_terima > 0) {
                    echo $request_belum_terima;
                } else {
                    echo "0 ";
                };
                ?></span> buah Request</marquee>

        <div class="box-header">
            <h2><i class="halflings-icon align-justify"></i><span class="break"></span>Penerimaan Request</h2>
            <div class="box-icon">
                <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
            </div>
        </div>

        <!--Table one-->
        <div class="box-content" id="things_table">
            <?php $this->load->view('view_monitoring_belum_terima'); ?>
        </div>


        <!--Second indicator-->
        <marquee>Belum Selesai: <span><?php
                if ($request_sudah_terima > 0) {
                    echo $request_sudah_terima;
                } else {
                    echo '0 ';
                }
                ?></span> Request</marquee>

        <div class="box-header">
            <h2><i class="halflings-icon align-justify"></i><span class="break"></span>Outstanding Request</h2>
            <div class="box-icon">
                <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
            </div>
        </div>


        <!--Table two-->
        <div class="box-content" id="things_table2">
            <?php $this->load->view('view_monitoring_belum_selesai'); ?>
        </div>
    </div><!--/.fluid-container-->
</div><!--/row-->

<?php $this->load->view('view_monitoring_modal') ?>

<div class="clearfix"></div>


<!-- start: JavaScript-->
<?php $this->load->view('/include/js.html'); ?>
<!-- end: JavaScript-->
<?php $this->load->view('view_monitoring_js'); ?>

型号

public function hitungRequestBelumTerima() {

    $this->db->select('*');
    $this->db->where('is_approved', 1);
    $this->db->where('by_who is not null');
    $this->db->where('it_person is null');

    $query = $this->db->get('tbl_requestfix');

    if ($query->num_rows() > 0) {
        return $query->num_rows();
    }

    return NULL;
}

之后，我编写jquery代码自动刷新指示器，如下所示：

function refresh() {
    var ini;
    var requestMasuk = $('#request_belum_terima').text();

    setTimeout(function() {

        $.ajax({
            url: '<?php echo base_url() . 'control_closing/hitungRequestBelumTerima/' ?>',
            type: 'POST',
            dataType: 'json',
            success: function(obj) {
                if (obj > requestMasuk) {
                    ini = obj;
                    $('#request_belum_terima').text(obj);
                    alert("New request coming");
                }

            }
        }).always(function() {
            $('#request_belum_terima').text(ini);
        }).done(function() {
            $('#request_belum_terima').text(ini);

        });

        $('things_table2').fadeOut('slow').load('<?php ?>').fadeIn('slow');
        refresh();
    }, 20000);
}




$(document).ready(function() {

    refresh();
}

函数刷新（）{
瓦里尼；
var requestMasuk=$（'#request_belum_terima'）。text（）；
setTimeout（函数（）{
$.ajax({
url:“”，
键入：“POST”，
数据类型：“json”，
成功：功能（obj）{
如果（obj>requestMasuk）{
ini=obj；
$（'request_belum_terima'）。文本（obj）；
警报（“新请求即将到来”）；
}
}
}).always（函数（）{
$（'request_belum_terima'）。文本（ini）；
}).done（函数（）{
$（'request_belum_terima'）。文本（ini）；
});
$（'things_table2'）.fadeOut（'slow'）.load（''）.fadeIn（'slow'）；
刷新（）；
}, 20000);
}
$（文档）.ready（函数（）{
刷新（）；
}

---

刷新工作正常，但我不知道为什么警报会弹出两次。因此，情况是：一个新请求但两个notif警报会在一个间隔内弹出。因此，在ex的前10分钟，警报会弹出。在20分钟后，警报仍会出现。但在30分钟后，警报不会弹出。为什么警报会弹出两次？

使用setInterval而不是setTim这是您的ajax函数（ajax未经测试，正如您所说，它正在工作）

函数刷新（）{
瓦里尼；
var requestMasuk=$（'#request_belum_terima'）。text（）；
$.ajax({
url:“”，
键入：“POST”，
数据类型：“json”，
成功：功能（obj）{
如果（obj>requestMasuk）{
ini=obj；
$（'request_belum_terima'）。文本（obj）；
警报（“新请求即将到来”）；
}
}
}).always（函数（）{
$（'request_belum_terima'）。文本（ini）；
}).done（函数（）{
$（'request_belum_terima'）。文本（ini）；
});
$（'things_table2'）.fadeOut（'slow'）.load（''）.fadeIn（'slow'）；
}
$（文档）.ready（函数（）{
setInterval（函数（）{
刷新（）；
}, 20000);
}

你想让我们调试这么长的代码吗？

function refresh() {
    var ini;
    var requestMasuk = $('#request_belum_terima').text();

    setTimeout(function() {

        $.ajax({
            url: '<?php echo base_url() . 'control_closing/hitungRequestBelumTerima/' ?>',
            type: 'POST',
            dataType: 'json',
            success: function(obj) {
                if (obj > requestMasuk) {
                    ini = obj;
                    $('#request_belum_terima').text(obj);
                    alert("New request coming");
                }

            }
        }).always(function() {
            $('#request_belum_terima').text(ini);
        }).done(function() {
            $('#request_belum_terima').text(ini);

        });

        $('things_table2').fadeOut('slow').load('<?php ?>').fadeIn('slow');
        refresh();
    }, 20000);
}




$(document).ready(function() {

    refresh();
}

function refresh() {
    var ini;
    var requestMasuk = $('#request_belum_terima').text();
    $.ajax({
        url: '<?php echo base_url() . 'control_closing/hitungRequestBelumTerima/' ?>',
        type: 'POST',
        dataType: 'json',
        success: function(obj) {
            if (obj > requestMasuk) {
                ini = obj;
                $('#request_belum_terima').text(obj);
                alert("New request coming");
            }

        }
    }).always(function() {
        $('#request_belum_terima').text(ini);
    }).done(function() {
        $('#request_belum_terima').text(ini);

    });

    $('things_table2').fadeOut('slow').load('<?php ?>').fadeIn('slow');
}




$(document).ready(function() {

 setInterval(function () {
    refresh();
 }, 20000);

}