當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript使用setInterval()实现真实进度条
生活随笔
收集整理的這篇文章主要介紹了
JavaScript使用setInterval()实现真实进度条
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?參考博客：前端實時更新后端處理進度_Yiyang的專欄-CSDN博客_前端實時獲取后端數據
1.為什么要使用真實進度條
最近做到的一項業務數據量大，單次操作執行時間很長，所以需要前端看到真實進度條（根據前端上傳的Excel表格處理其中的數據）
業務簡述：將上傳的一個Excel表格中的數據做一個導出，大概是10w條。
2.思路
前端會向后臺發送兩個請求，一個普通請求處理業務，一個定時請求每隔一定時間更新進度條。
相應的，后臺需要兩個方法和一個進度全局變量。方法一來完成業務邏輯，中間會多次改變進度全局變量；方法二獲取進度全局變量的值并傳給前端。
3.編碼過程
我的項目前后端不分離，前端是jsp，后臺是java。為了方便理解，我把代碼盡量精簡（像具體業務我就省略了）
3.1前端
1.先把上傳文件、進度條等dom元素和一些簡單的樣式寫好：
<style>#progress {width: 307px;border-style: solid;border-radius: 5px;margin: 10px auto 5px;display: none;}#progress_bar {width: 0%;background-color: #00B83F;// 綠色進度條} </style> <body> <div class="page-container" style="text-align: center"><div><input type="file" id="file_xlsx" name="file"><input type="button" id="submit_xlsx" value="上傳并導出" onclick="uploadFile()"><label id="msg" style="color: red"></label></div><div id="progress"><div id="progress_bar"></div></div> </div> </body>現在對應的網頁就長這樣：
?這里沒有顯示進度條是因為我設置了在沒有上傳文件的情況下隱藏進度條（display:none）
2.接下來是關鍵的JavaScript代碼（使用了jquery）
<script type="text/javascript">function uploadFile() {$("#msg").html("正在導出..."); //導出提示信息$("#progress").css('display', 'block'); //顯示進度條//這里是為了后面的發送文件var fileobj = $("#file_xlsx")[0].files[0];var form = new FormData();form.append("file", fileobj);//定時請求（每隔一秒執行一次）var sitv = setInterval(function () {var prog_url = '/url2'; //獲取進度的請求url$.getJSON(prog_url, function (res) {$('#progress_bar').width(res + '%'); //根據獲得的進度改變進度條});}, 1000); //setInterval()每隔1秒獲取一次后臺的進度值//業務請求（執行一次）$.ajax({type: 'POST',url: '/url1', //執行導出數據的請求urldata: form,processData: false,contentType: false,beforeSend: function () {$("#submit_xlsx").attr('onclick', 'javascript:void();'); //這里是為了防止重復點擊提交文件},success: function (data) {clearInterval(sitv); //取消由setInterval()設置的 timeout$("#progress").css('display', 'none'); //任務成功完成了，隱藏進度條if ("success" === data) { //后臺返回success，就顯示一個成功彈窗layer.msg("導出成功!", {icon: 1, time: 2000}, function () {location.reload();});} else {layer.msg(data, {icon: 2, time: 2000});}$("#msg").html("");$("#submit_xlsx").removeAttr('onclick');},error: function (data) {clearInterval(sitv);$("#progress").css('display', 'none');$("#msg").html("");$("#submit_xlsx").removeAttr('onclick');}});} </script>3.2后臺
我用的是java語言，如果使用其他后臺語言思路是一樣的
我先設置了一個全局變量：
//進度private Double progress = 0.0;兩個請求分別如下
//業務方法@RequestMapping("/url1")public void fun(){//業務邏輯（對上傳的文件進行保存和數據導出）//若干次更新進度progress的值} //獲取進度方法@RequestMapping("/url2")@ResponseBodypublic String getProgress(HttpServletResponse response){return progress.toString();}4.運行截圖
運行過程中的一個截圖：
至此，一個真實的進度條就完成了！
總結
以上是生活随笔為你收集整理的JavaScript使用setInterval()实现真实进度条的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js实现进度条的拖拽
- 下一篇： 教你用JavaScript制作进度条