如何成功停止setTimeout？

Question

在beforeSend部分中，我添加了setTimeout 。 如果ajax花費20秒鍾以上，則會顯示超時消息。 如果ajax在20秒之前成功完成，則setTimeout仍在運行，並顯示超時消息。

如果ajax在不到20秒的時間內完成，如何防止出現超時消息？

形成

<?= $form->field($relasi, 'npsn')->textInput(['class' => 'form-control', 'id' => 'npsn', 'onkeyup' => 'sendFirstCategory(this.value)', 'autocomplete' => 'off'])->label(false); ?>

的JavaScript

function sendFirstCategory(npsn)
{
    var test = npsn;
    var timeoutvar = null;

    $.ajax({
        url: '<?php echo \Yii::$app->getUrlManager()->createUrl('keranjang/isi-data-ajax') ?>',
        type: 'POST',
        data: { test: test },
        beforeSend:function()
        {  
            $('#hokya').show();
            $('#hokya').html('<img src="../img/Preloader_1.gif" alt="Loading..." />');

            var a = "";

            $('form [id=nm_sekolah]').val(a);
            $('form [id=email]').val(a);
            $('form [id=telp]').val(a);
            $('form [id=alamat]').val(a);
            $('form [id=penanggung_jawab]').val(a);

            timeoutvar = setTimeout(function() { 
                $("#hokya").hide(); 
                $('#login-modal').modal('show');
                $('form [id=nm_sekolah]').val(a);
                $('form [id=email]').val(a);
                $('form [id=telp]').val(a);
                $('form [id=alamat]').val(a);
                $('form [id=penanggung_jawab]').val(a);
            }, 20000);
        },
        success: function(data)
        {

            clearTimeout(timeoutvar);
            var o = $.parseJSON(data);

            $.each(o, function(key, value){
                $('form [id=' + key + ']').val(value);
            });

            $('#hokya').hide();
        }
   });
}

Answer 1

我認為您可以編寫一個錯誤回調函數，並檢查狀態是否為超時。當然，您也需要設置超時：20。

來自jquery的ajax api：

error類型：Function（jqXHR jqXHR，字符串textStatus，字符串errorThrown）如果請求失敗，則要調用的函數。 該函數接收三個參數：jqXHR對象（在jQuery 1.4.x中為XMLHttpRequest），一個描述發生錯誤的類型的字符串，以及一個可選的異常對象（如果發生）。 第二個參數（除null外）的可能值為“超時”，“錯誤”，“中止”和“ parsererror”。 發生HTTP錯誤時，errorThrown會接收HTTP狀態的文本部分，例如“未找到”或“內部服務器錯誤”。 從jQuery 1.5開始，錯誤設置可以接受函數數組。 每個函數將依次調用。 注意：對於跨域腳本和跨域JSONP請求，不會調用此處理程序。 這是一個Ajax事件。

function sendFirstCategory(npsn){
var test = npsn;
$.ajax({
    url: '<?php echo \Yii::$app->getUrlManager()->createUrl('keranjang/isi-data-ajax') ?>',
    type: 'POST',
    data: { test: test },
    beforeSend:function()
    {  
        $('#hokya').show();
        $('#hokya').html('<img src="../img/Preloader_1.gif" alt="Loading..." />');

        var a = "";

        $('form [id=nm_sekolah]').val(a);
        $('form [id=email]').val(a);
        $('form [id=telp]').val(a);
        $('form [id=alamat]').val(a);
        $('form [id=penanggung_jawab]').val(a);
    },
    timeout:200000,
    success: function(data)
    {
        var o = $.parseJSON(data);

        $.each(o, function(key, value){
            $('form [id=' + key + ']').val(value);
        });

        $('#hokya').hide();
    },
    error:function(jqXHR,textStatus) 
    {
        if (textStatus=='timeout') {
            var a = "";
            $("#hokya").hide(); 
            $('#login-modal').modal('show');
            $('form [id=nm_sekolah]').val(a);
            $('form [id=email]').val(a);
            $('form [id=telp]').val(a);
            $('form [id=alamat]').val(a);
            $('form [id=penanggung_jawab]').val(a);
        }
    }

}）; }

Answer 2

您的timeout = setTimeout(...)語句將超時id分配給名為timeout的全局變量。 您的clearTimeout(timeoutvar); 使用另一個變量timeoutvar 。

將timeout更改為timeoutvar 。