Question

我有以下Jquery脚本来刷新div：

<script>
(function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#content').hide();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#content').show();
            },
            success: function() {
                $('#loading').hide();
                $('#content').show();
            }
        });
        var $container = $("#content");
        $container.load('../../../viewcontent.php');
        var refreshId = setInterval(function()
        {
            $container.load('../../../viewcontent.php');
        }, 30000);
    });
})(jQuery);
</script>

是否可以更改此脚本以使其显示加载div为3秒，然后继续完成/成功功能？

Answer 1

做坏事的方法

<script>
(function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#content').hide();
                $('#loading').show();
            },
            complete: function() {
                setTimeout(function(){ 
                    $('#loading').hide(); 
                    $('#content').show();
                }, 3000);

            },
            success: function() {
                 setTimeout(function(){ 
                    $('#loading').hide(); 
                    $('#content').show();
                }, 3000);
            }
        });
        var $container = $("#content");
        $container.load('../../../viewcontent.php');
        var refreshId = setInterval(function()
        {
            $container.load('../../../viewcontent.php');
        }, 30000);
    });
})(jQuery);
</script>

非常不理想，因为你是ajax你的ajax电话。如果你使用超时

，它永远不会快3秒

这样做的好方法：

$.ajax({
  type: 'POST',
  url: "/",
  data: {},
  beforeSend: function(XMLHttpRequest)
  {
    //Upload progress
    XMLHttpRequest.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {  
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
      }
    }, false); 
    //Download progress
    XMLHttpRequest.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {  
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
      }
    }, false); 
  },
  success: function(data){
    //Do something success-ish
  }
});

查看此网站以获得良好的参考HTML5 progress bar ajax

Jquery刷新div改变显示div时间

1 个答案: