jQuery 刷新 div 更改显示 div 时间答案

【问题标题】：Jquery refresh div alter show div timejQuery 刷新 div 更改显示 div 时间
【发布时间】：2015-08-07 12:36:29
【问题描述】：

我有以下 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 秒，然后继续完成/成功功能？

【问题讨论】：

在$('#loading').hide()之前设置一个超时时间？
这不是回答如何编辑现有源代码以满足您的需求，但如果您找不到解决方案，请查看此答案。这使用了progress 事件监听器
@NewToJS 你的回答是什么意思？
你想达到什么目的？在等待异步调用结果时显示一些东西？
@CrisKolkman 抱歉回复晚了，我没有注意到提交的评论，但这里是我提到的链接stackoverflow.com/questions/26674575/… 这将显示进度%

标签： javascript jquery

【解决方案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 调用。如果你使用超时，它永远不会超过 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

【讨论】：

太棒了，这成功了，谢谢！我删除了第一个 $('#content').hide();因为他还隐藏了包含加载 div 的 div。
@CrisKolkman 很高兴为您提供帮助 :)。请检查我更新的答案，如果它解决了您的问题，请标记为答案提前谢谢