delay the showing of a ajax loading gif using jQuery

后端 未结 4 619
后悔当初
后悔当初 2021-02-06 01:11

What is the best way to put a delay on the showing of a ajax-loader gif. When I click a button the loader gif shows and hides even if the time taken is a few hundred milli-secon

相关标签:
4条回答
  • 2021-02-06 01:22

    Thought I'd share something I did for this. I had a situation where I needed to do more than just show or hide the one element. So I used bind to create custom events for the loader:

    $("#loader").bind("delayshow", function (event, timeout) {
        var $self = $(this);
        $self.data('timeout', setTimeout(function () {
            // show the loader
            $self.show();
            /* 
                implement additional code here as needed
            */
        }, timeout));
    }).bind("delayhide", function (event) {
        // close and clear timeout
        var $self = $(this);
        clearTimeout($self.hide().data('timeout')); 
        /*
            implement additional code here as needed 
        */
    });
    
    // show it with a 500 millisecond delay
    $("#loader").trigger('delayshow', 500);
    
    // hide it
    $("#loader").trigger('delayhide');
    
    0 讨论(0)
  • 2021-02-06 01:37

    As you can see I added a timeout which delay showing for 300ms. If ajax is faster the timeout is cancelled before the loader gets really shown.

    <script type="text/javascript">
        var showLoader;
        $(document).ready(function() {
            $('#loader').hide();
            $('#btnGetPeople').click(function() {
                // only show loader if ajax request lasts longer then 300 ms
                showLoader = setTimeout("$('#loader').show()", 300);
                $.getJSON("/User/GetName/10",
                    null,
                    function(data) { showPerson(data); });
            });
        });
    
        function showPerson(data) {
            clearTimeout(showLoader);
            alert(data);
            $('#loader').hide();
        }
    </script>
    
    0 讨论(0)
  • 2021-02-06 01:37

    Here is a fun way to do it. Replace $loader.show() with this:

    $("#loader").data('timeout', window.setTimeout(function(){ $("#loader").show()}, 1000));
    

    And your hide command with this:

    window.clearTimeout($("#loader").hide().data('timeout'));
    
    0 讨论(0)
  • 2021-02-06 01:37

    You could also do it like this.

    var loadingTimer;
    
    $(document).ready(function () {
    
        $("#loader").ajaxStart(function () {
            loadingTimer = setTimeout(function () {
                $("#loader").show();
            }, 200);
        });
    
        $("#loader").ajaxStop(function () {
            clearTimeout(loadingTimer);
            $(this).hide();
        });
    
    }
    
    0 讨论(0)
提交回复
热议问题