카운터에 따라 진행률 막대가 증가합니다.

Question

카운터 값에 따라 '속도'또는 setInterval을 변경하려면 진행률 표시 줄을 어떻게 얻을 수 있습니까? 예를 들어 막대가 40보다 작 으면 - 이렇게하거나 60보다 작게하는 등의 작업을 수행하십시오.

진행률 표시 줄이 40, 그 다음으로는 60 %가되면 느려지려고합니다.

var counter = 0; 
var timer = setInterval(function() { 
     if (counter <= '40') { 
      progressLoading.val(counter); 
      counter = counter += 1; 
     } else { 
      clearInterval(timer); 
     } 
    }, 20); 

Answer 1

콘솔에서 다음을 실행하고 이것이 원하는 효과인지 확인하십시오.

var counter = 0; 
var factor = 1; 

var damping = 80; // Increase this to slow down increment. 

// This is the minimum value of 'factor'. Increasing this will speed up the function 
var minVal = 0.1; 

var timer = setInterval(function() { 
    console.log(Math.ceil(counter)); // Call your function here. 
    counter = counter + factor; 
    if (counter > 40 && counter < 100) { 
     factor = Math.max((100 - counter)/damping, minVal) 
    } else if (counter > 100) { 
     clearInterval(timer); 
    } 
}, 20); 

처음 counter은 factor = 1 씩 증가하고있다. 40 이후에는 factor이 점차 줄어 듭니다. factor의 최소값은 minVal보다 작을 수 없습니다. 더 불규칙와 진행 상황을 표시

은 -

var counter = 0; 
var factor = 1; 

var timer = setInterval(function() { 
    console.log(Math.ceil(counter)); // Call your function here. 
    counter = counter + factor; 
    if (counter > 40 && counter < 100) { 
     factor = Math.max(Math.abs(Math.sin(100 - counter)), 0.1) 
    } else if (counter > 100) { 
     clearInterval(timer); 
    } 
}, 20); 

Math.sin 기능을 항상 +1에 -1 사이의 숫자를 반환합니다. 우리는 오직 양수가 필요하므로 Math.abs을 통해 전달합니다. 따라서 factor은 항상 0과 1 사이입니다.

또한 숫자가 너무 작아서 요인 값이 중요하지 않을 수 있습니다. 이 문제가 발생하지 않도록하려면 0.1으로 최소값을 설정하고 Math.max으로 확인하십시오.

불규칙성 진행 표시 감소와 속도 -

var counter = 0; 
var factor = 1; 

var maxVal = 1; // Maximum value of `factor` after crossing 40 
var minVal = 0.1; // Minimum value of `maxVal` 
var damping = 60; // damping for `maxVal` 

var timer = setInterval(function() { 
    console.log(Math.ceil(counter)); // Call your function here. 
    counter = counter + factor; 
    if (counter > 40 && counter < 100) { 
     maxVal = Math.max((100 - counter)/damping, minVal) 
     factor = Math.min(Math.max(Math.abs(Math.sin(100 - counter)), 0.1), maxVal); 
    } else if (counter > 100) { 
     clearInterval(timer); 
    } 
}, 20); 

이 하나의 결합 된 상기의 양이다. 두 번째 경우 factor은 0과 1 사이의 값일 수 있습니다. 위의 기능은 factor가 0 및 maxVal 사이에 있는지 확인합니다 우리가 1