Commit @25bf086ed95b4389c4b346072af7b3bc6de4f6e6

정수빈 2024-12-02

2024/12/02 주석추가

@25bf086ed95b4389c4b346072af7b3bc6de4f6e6

782b2ab

25bf086

src/main/webapp/publish/js/content.js

--- src/main/webapp/publish/js/content.js

+++ src/main/webapp/publish/js/content.js


 
 function progressStart(time, msg) {
     $(".progress_bar_wrap").css("display", "flex");
+    
     var timeText = document.querySelector(".time_text");
     var bar = document.querySelector(".change_bar");
+    
     var width = 1;
     var totalTime = time * 1000; // 시간
-    var cmpWid = totalTime / 100; // 시간당 width
+    var cmpWid = totalTime / 100; // width 증가하는 시간
 
-    start = setInterval(changeWidth, cmpWid);
+    start = setInterval(changeWidth, cmpWid); // 프로그레스바 시작
 
     function changeWidth() {
         if (width >= 100) {
-            clearInterval(start);
+        	// width 100% 됐을 때
+            clearInterval(start); // 프로그래스바 멈춤
+            
             timeText.innerHTML = "100%";
             setTimeout(function () {
+            	// 100%되고 1초 후 잠시만 기다려주세요 변경 및 애니메이션 추가
                 timeText.innerHTML = "잠시만 기다려주세요...";
                 $(".time_text").addClass("animation");
             }, 1000)
 
+            // 메시지 있을 때 alert 띄움
             if (msg !== "" && msg !== undefined && msg !== null) {
                 alert(msg);
             } else {}
 
         } else {
+        	// width 증가 및 text 변경
             width++;
             bar.style.width = width + "%";
             timeText.innerHTML = width + "%";

     }
 }
 
+// 프로그레스바 완료
 function progressComplete(msg,time,backtime) {
+	
     change = setInterval(changeText);
     var width = 1;
 
     function changeText() {
+    	
         var widthText = $(".change_bar").attr("style");
-        widthText = widthText.replace(/[width:%;overfloen]/ig, "");
+        widthText = widthText.replace(/[width:%;overfloen]/ig, ""); // width 값 퍼센트로 가져오기
+        
         if (width >= 100) {
             $(".time_text").text("100%");
             
             if(backtime>=time){
+            	// 예상시간보다 먼저 처리됐을 경우
             	setTimeout(function () {
                     $(".time_text").text("잠시만 기다려주세요...");
                     $(".time_text").addClass("animation");

             }, 0);
             
         } else {
+        	// width 증가 및 text 변경        		
             width++;
             $(".time_text").text(width + "%");
             $(".change_bar").css("width", width + "%");
         }
     }
-    clearInterval(start);
+    
+    clearInterval(start); // 프로그레스바 시작 멈추기
+    
+    // 메시지 있을 때 alert 띄움    
     if (msg !== "" && msg !== undefined && msg !== null) {
         setTimeout(function () {
             alert(msg);

782b2ab

25bf086

src/main/webapp/publish/security_login_ajax.html

--- src/main/webapp/publish/security_login_ajax.html

+++ src/main/webapp/publish/security_login_ajax.html


 
             //progressStart(time, msg);
 
-            var time = 3;
+            var time = 3; // 예상시간
 
             $.ajax({
                 type: "GET",

 
                     // 성공 실패 분기처리
                     if (data.status == 'OK') {
+                    	// 성공 시 프로그레스바 100% 로 변경
+                    	// 예상 성공시간 = time, 백단 성공시간 == params.sleep
                         progressComplete(data.message,time,params.sleep);
-                        //$(".progress_bar_wrap").hide();
                     } else if (data.status == 'BAD_REQUEST') {
+                    	// 실패시 alert 띄우고 닫기.
                         alert(params.f_msg);
                         $(".progress_bar_wrap").hide();
                     }

 
                 },
                 beforeSend: function (xmlHttpRequest) {
+                	// 프로그레스바 시작
                     progressStart(time);
                 },
                 complete: function (xhr, textStatus) {
                     // 실패든 성공이든 ajax
                     
-                    // 성공 alert 먼저 뜨고 그다음에 언제 꺼질지.
+                    // alert 먼저 뜨고 그다음에 언제 꺼질지.
                     var delay = (time - params.sleep) * 1000;
                     
                     if (time > params.sleep) {
                         setTimeout(function () {
                             $(".progress_bar_wrap").hide();
                         }, delay);
-
                     } else {
-                    	
                         $(".progress_bar_wrap").hide();
                     }
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -1586,28 +1586,35 @@
1586	1586
1587	1587	function progressStart(time, msg) {
1588	1588	$(".progress_bar_wrap").css("display", "flex");
	1589	+
1589	1590	var timeText = document.querySelector(".time_text");
1590	1591	var bar = document.querySelector(".change_bar");
	1592	+
1591	1593	var width = 1;
1592	1594	var totalTime = time * 1000; // 시간
1593		- var cmpWid = totalTime / 100; // 시간당 width
	1595	+ var cmpWid = totalTime / 100; // width 증가하는 시간
1594	1596
1595		- start = setInterval(changeWidth, cmpWid);
	1597	+ start = setInterval(changeWidth, cmpWid); // 프로그레스바 시작
1596	1598
1597	1599	function changeWidth() {
1598	1600	if (width >= 100) {
1599		- clearInterval(start);
	1601	+ // width 100% 됐을 때
	1602	+ clearInterval(start); // 프로그래스바 멈춤
	1603	+
1600	1604	timeText.innerHTML = "100%";
1601	1605	setTimeout(function () {
	1606	+ // 100%되고 1초 후 잠시만 기다려주세요 변경 및 애니메이션 추가
1602	1607	timeText.innerHTML = "잠시만 기다려주세요...";
1603	1608	$(".time_text").addClass("animation");
1604	1609	}, 1000)
1605	1610
	1611	+ // 메시지 있을 때 alert 띄움
1606	1612	if (msg !== "" && msg !== undefined && msg !== null) {
1607	1613	alert(msg);
1608	1614	} else {}
1609	1615
1610	1616	} else {
	1617	+ // width 증가 및 text 변경
1611	1618	width++;
1612	1619	bar.style.width = width + "%";
1613	1620	timeText.innerHTML = width + "%";
...	...	@@ -1615,17 +1622,22 @@
1615	1622	}
1616	1623	}
1617	1624
	1625	+// 프로그레스바 완료
1618	1626	function progressComplete(msg,time,backtime) {
	1627	+
1619	1628	change = setInterval(changeText);
1620	1629	var width = 1;
1621	1630
1622	1631	function changeText() {
	1632	+
1623	1633	var widthText = $(".change_bar").attr("style");
1624		- widthText = widthText.replace(/[width:%;overfloen]/ig, "");
	1634	+ widthText = widthText.replace(/[width:%;overfloen]/ig, ""); // width 값 퍼센트로 가져오기
	1635	+
1625	1636	if (width >= 100) {
1626	1637	$(".time_text").text("100%");
1627	1638
1628	1639	if(backtime>=time){
	1640	+ // 예상시간보다 먼저 처리됐을 경우
1629	1641	setTimeout(function () {
1630	1642	$(".time_text").text("잠시만 기다려주세요...");
1631	1643	$(".time_text").addClass("animation");
...	...	@@ -1638,12 +1650,16 @@
1638	1650	}, 0);
1639	1651
1640	1652	} else {
	1653	+ // width 증가 및 text 변경
1641	1654	width++;
1642	1655	$(".time_text").text(width + "%");
1643	1656	$(".change_bar").css("width", width + "%");
1644	1657	}
1645	1658	}
1646		- clearInterval(start);
	1659	+
	1660	+ clearInterval(start); // 프로그레스바 시작 멈추기
	1661	+
	1662	+ // 메시지 있을 때 alert 띄움
1647	1663	if (msg !== "" && msg !== undefined && msg !== null) {
1648	1664	setTimeout(function () {
1649	1665	alert(msg);

...	...	@@ -46,7 +46,7 @@
46	46
47	47	//progressStart(time, msg);
48	48
49		- var time = 3;
	49	+ var time = 3; // 예상시간
50	50
51	51	$.ajax({
52	52	type: "GET",
...	...	@@ -61,9 +61,11 @@
61	61
62	62	// 성공 실패 분기처리
63	63	if (data.status == 'OK') {
	64	+ // 성공 시 프로그레스바 100% 로 변경
	65	+ // 예상 성공시간 = time, 백단 성공시간 == params.sleep
64	66	progressComplete(data.message,time,params.sleep);
65		- //$(".progress_bar_wrap").hide();
66	67	} else if (data.status == 'BAD_REQUEST') {
	68	+ // 실패시 alert 띄우고 닫기.
67	69	alert(params.f_msg);
68	70	$(".progress_bar_wrap").hide();
69	71	}
...	...	@@ -73,21 +75,20 @@
73	75
74	76	},
75	77	beforeSend: function (xmlHttpRequest) {
	78	+ // 프로그레스바 시작
76	79	progressStart(time);
77	80	},
78	81	complete: function (xhr, textStatus) {
79	82	// 실패든 성공이든 ajax
80	83
81		- // 성공 alert 먼저 뜨고 그다음에 언제 꺼질지.
	84	+ // alert 먼저 뜨고 그다음에 언제 꺼질지.
82	85	var delay = (time - params.sleep) * 1000;
83	86
84	87	if (time > params.sleep) {
85	88	setTimeout(function () {
86	89	$(".progress_bar_wrap").hide();
87	90	}, delay);
88		-
89	91	} else {
90		-
91	92	$(".progress_bar_wrap").hide();
92	93	}
93	94

Delete comment