javascript - 如何停止功能 doajax_red 和 doajax_blue ，当检查单选按钮？

Question

如何停止功能 doajax_red 和 doajax_blue ，当选中单选按钮时？

首先，当你加载页面 index.php 然后按下 red button 你会看到 loading img

选中的radio button BLUE和选中的radio button RED

加载 img 仍然显示，.

.

如何在选中单选按钮 BLUE 时停止函数 doajax_red

并在选中单选按钮 RED 时停止函数 doajax_blue

http://jsfiddle.net/xq0kt3kk/4/

索引.php

..

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<form name="form1" id="buy_out_form-id" method="post" action="" enctype="multipart/form-data" onsubmit="return checkform(this);">
<script>
// script for hide.show element base on radio button //
$(document).ready(function(){
   $(".color").click(function(){
       if($(this).attr("value")=="red"){
           $("#red").show();
           $("#blue").hide();  

       }
       if($(this).attr("value")=="blue"){
           $("#blue").show();
           $("#red").hide();  
       }
   });
});
</script>
<input onchange="javascript:e.preventDefault();this.form.submit();" class="color" type="radio" name="rdSpace" value="red" checked="">RED
<br>
<input onchange="javascript:e.preventDefault();this.form.submit();" class="color" type="radio" name="rdSpace" value="blue">BLUE
<br>
<span id="red">
<input type="button" id="button_red" value="RED" onclick="doajax_red()"/>
<span id="loading_red" style="display: none; width: 100px; text-align: center; "><img src="http://www.demo.mangaldeep.co.in/image/loading.gif"/></span>
</span>
<span id="blue" style="display: none;">
<input type="button" id="button_blue" value="BLUE" onclick="doajax_blue()"/>
<span id="loading_blue" style="display: none; width: 100px; text-align: center; "><img src="http://www.demo.mangaldeep.co.in/image/loading.gif"/></span>
</span>
</form>



<script>
function doajax_red() {
    $("#button_red").attr("disabled", true);
    $('#myplace_red').hide();
    $("#loading_red").show();
    setTimeout(function(){
        $.ajax
        (
            {
                url: 'test_red.php',
                type: 'POST',
                data: $('#buy_out_form-id').serialize(),
                cache: false,
                success: function (data) {
                    $("#loading_red").hide();
                    $("#button_red").attr("disabled", false);
                    $('#myplace_red').show();
                    $('#myplace_red').html(data);
                }
            }
        )
    }, 10000);
}
</script>




<script>
function doajax_blue() {
    $("#button_blue").attr("disabled", true);
    $('#myplace_blue').hide();
    $("#loading_blue").show();
    setTimeout(function(){
        $.ajax
        (
            {
                url: 'test_blue.php',
                type: 'POST',
                data: $('#buy_out_form-id').serialize(),
                cache: false,
                success: function (data) {
                    $("#loading_blue").hide();
                    $("#button_blue").attr("disabled", false);
                    $('#myplace_blue').show();
                    $('#myplace_blue').html(data);
                }
            }
        )
    }, 10000);
}
</script>

Answer 1

您应该为 setTimeout 创建两个变量，例如 RED_TIMEOUT 和 BLUE_TIMEOUT。然后，在您的函数内部，在开始之前您将检查是否存在其他超时并使用 clearTimeout() 阻止它，代码如下:

var RED_TIMEOUT, BLUE_TIMEOUT;

function doajax_red() {
    $("#button_red").attr("disabled", true);
    $('#myplace_red').hide();
    $("#loading_red").show();

    if (BLUE_TIMEOUT!==undefined) clearTimeout(BLUE_TIMEOUT);
    // here ^ you stop the other function

    RED_TIMEOUT = setTimeout(function(){
        $.ajax({
            url: 'test_red.php',
            type: 'POST',
            data: $('#buy_out_form-id').serialize(),
            cache: false,
            success: function (data) {
                $("#loading_red").hide();
                $("#button_red").attr("disabled", false);
                $('#myplace_red').show();
                $('#myplace_red').html(data);
            }
        })
    }, 10000);
}

function doajax_blue() {
    $("#button_blue").attr("disabled", true);
    $('#myplace_blue').hide();
    $("#loading_blue").show();

    if (RED_TIMEOUT!==undefined) clearTimeout(RED_TIMEOUT);
    // here ^ you stop the other function

    BLUE_TIMEOUT = setTimeout(function(){
        $.ajax({
            url: 'test_blue.php',
            type: 'POST',
            data: $('#buy_out_form-id').serialize(),
            cache: false,
            success: function (data) {
                $("#loading_blue").hide();
                $("#button_blue").attr("disabled", false);
                $('#myplace_blue').show();
                $('#myplace_blue').html(data);
            }
        })
    }, 10000);
}