clearTimeout not working using jQuery?

Question

<script type="text/javascript>
    function ShowProgress1() {
                var timerid;
                timerid=setTimeout(function () {
                    var modal = $('<div />');
                    modal.addClass("modal1");
                    $('body').append(modal);
                    var loading = $(".loading1");
                    loading.show();
                    var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                    var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                    loading.css({ top: top, left: left });
                    test();
                }, 0);
            }
            //hide
            function test() {
                if (timerid != null) {
                    clearTimeout(timerid);
                }
            }
            $('[id*=chk_ColorCL]').live("click", function () {
                ShowProgress1();
            });
    </script>
    <asp:CheckBoxList ID="chk_ColorCL" RepeatDirection="Horizontal" RepeatLayout="Table"
                                                                                                                                RepeatColumns="25" runat="server" Font-Bold="true" OnSelectedIndexChanged="fun_chkColor" AutoPostBack="true">                                                                                                                       </asp:CheckBoxList>

    private void funchk()
    {
     ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "test()", true);
    }

here

i want to show the image after alert is executed the image will be disappeared

but not working.I mentioned my code sample above.

Answer 1

The timerId variable that you are referencing in testmethod is different than the one referenced in ShowProgress1. Here is why: when declaring var timerid inside ShowProgress1 you are making that variable local to the scope of the function so it is not available outside of it.

Move the declaration of the timerId variable out of ShowProgress1 method so both methods make reference to the same variable.

var timerid;

function ShowProgress1() {
    timerid=setTimeout(function () {
      var modal = $('<div />');
      modal.addClass("modal1");
      $('body').append(modal);
      var loading = $(".loading1");
      loading.show();
      var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
      var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
      loading.css({ top: top, left: left });
      test();
  }, 0);
}
    //hide
function test() {
    if (timerid != null) {
        clearTimeout(timerid);
    }
}
$('[id*=chk_ColorCL]').live("click", function () {
    ShowProgress1();
});