如何实现加载文本的时间间隔？

我想做一个loading ...使用interval和jqueryget方法。示例与此link:stackoverflow上的相同。我可以使文本显示，但我如何在我的get函数上实现它。点击后如何实现加载文本的时间间隔？

jQuery(document).ready(function($) { 
    $(document).on("click", ".rekod", function() { 
    i = 0; 
    setInterval(function() { 
     i = ++i % 4; 
     $("#loading").html("loading" + Array(i + 1).join(".")).fadeIn(); 
    }, 500); 

    var id = $(this).attr("id").split("-"), 
     pageNo = parseInt(id[1]); 
    loadResult(pageNo); 
    }); 

    function loadResult(param) { 
    $.get("result-updated.php", { 
     startrow: param 
    }, function(data) { 
     $('#showAll').html(data); 
    }).done(function() { 
     $('#loading').fadeOut("slow"); 
    }); 
    } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="showAll"></div> 
<span id="loading"></span>

从我的代码，

加载文本显示。
当get函数完成时，加载文本不会淡出。
我正确的做法吗？

更新代码：

我能够得到的输出欲望，但我卡在寻找一种方法来明确的时间间隔。下面是更新后的代码，我添加，

$.ajaxSetup({ 
     beforeSend : 
     function(){ 
      i = 0; 
      var loading = setInterval(function() { 
       i = ++i % 4; 
       $("#loading").html("loading"+Array(i+1).join(".")); 
       //clearInterval(loading); 
       //It work if I insert here but the dot(.) will only appear once. 
      }, 500); 
     }, 
     complete : 
     function(){ 
     clearInterval(loading); //The function is not working here. 
     setTimeout(function(){ 
      $('#loading').html("Start"); 
     },2000); 
    } 
});

我想点（。）重演，停止，直到它有成功的负荷get方法的页面。

来源

2017-03-09 Amran

您可以在淡出添加到更迭的功能？（数据）{ 函数（数据）{（'＃showAll'）。html（data）; $（'＃loading'）。fadeOut（“slow”）; }） – Roelant

http://stackoverflow.com/questions/23906956/show-loading-icon-until-the-page-is-load – Brad

我认为'loadResult（）'淡出加载...文本是在500ms间隔之前调用，淡入文本。所以fadeOut在调用之前被调用。你为什么要设置间隔呢？每次单击按钮时，它将注册一个新的时间间隔。那真的是你想要的吗？ – Schlangguru

解决方案，我做。希望对有同样问题的人有用。

jQuery(document).ready(function($) { 
 

 
    $(document).on("click", ".rekod, .view-detail", function(e) { 
 
    e.preventDefault(); 
 
    if ($(this).attr("class") == "rekod") { 
 
     var id = $(this).attr("id").split("-"), 
 
     pageNo = parseInt(id[1]); 
 
     loadResult(pageNo); 
 
    } else { 
 
     url = $(this).attr("href"), 
 
     id = url.split("="), 
 
     id = parseInt(id[1]); 
 
     loadResult(id); 
 
    } 
 
    }); 
 

 
    loadingText = function() { 
 
    i = ++i % 6; 
 
    $("#loading").html("Loading" + Array(i + 1).join(".")).fadeIn(); 
 
    console.log(i); 
 
    } 
 

 
    function loadResult(param) { 
 
    i = 0; 
 
    var loading = setInterval(loadingText, 200); 
 
    setTimeout(function() { 
 
     // Ajax Function will be here 
 
     clearInterval(loading); 
 
     $('#loading').fadeOut(); 
 
    }, 1000); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="page-1" class="rekod">Click Me</a> 
 
<div id="showAll"></div> 
 
<div id="loading"></div>

来源

2017-03-13 01:21:01 Amran

只需在点击按钮后显示loading...文本并将其与响应一起删除即可。无需间隔。

的Javascript：

jQuery(document).ready(function($) { 
    $(document).on("click", ".rekod", function() { 
     $('#loading').fadeIn("slow"); 
     loadResult(); 
    }); 
}); 


function loadResult() { 
    $.get("result-updated.php", { 
    }, function(data) { 
    console.log(data); 
    $('#showAll').html(data); 
    }).done(function(data) { 
    $('#loading').fadeOut("slow"); 
    }); 
}

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 


    <title>JS Bin</title> 
</head> 
<body> 
    <div id="showAll"></div> 
    <span id="loading" style="display:none;"> 
    loading... 
    </span> 
</body> 
</html>

来源

2017-03-09 08:47:30 Schlangguru

感谢您的回答。接近我想要的，但我希望加载词上的点（。）像我上面给出的链接一样移动 – Amran

如何实现加载文本的时间间隔？

回答

相关问题