爲什麼我的算法降低元件的高度不正常

Question

我正在寫一些軟件讀取來自PSI泵的壓力。在前端，我想增加一個功能，當球體的壓力上升到要測量的數值時球體會上升，當測試結束後，我希望相同的球體根據當前PSI下降到其起始位置值，這將看起來像一個視覺安全隊列，這樣操作員在壓力仍然高的時候不會拔下閥門。

我的上升算法完美地工作，隨着壓力的增加，球會上升一定的百分比，我通過計算球的起始位置並找到它從終點位置的偏移並找到期望的PSI值以及每次將新值傳遞給函數時的當前PSI值。

此圖片應該有希望描述球是如何上升：

現在，你會認爲運行這段代碼反向這將是倒車算法簡單，但是我已經試過了但即使PSI仍在8000左右，球也會下降到起始位置。

這裏是我的depressure算法：

function depressure(value) 
{ 
    // Keep descending ball until it reaches 50, this is considered safe to remove the valve 
    if(value > 50) 
    { 
     // Calculate the depressure percentage 
     var offset = parseInt($("#golfBall").css('margin-top')); 
     var percent = value/HIGHEST_VAL * 100; // The highest recorded PSI for this test 

     // I compute the new height here, it returns values like 95% as 
     // I'd expect, but the ball still descends far too quickly 
     var newHeight = offset/100 * percent; 

     console.log("The new height is: " + newHeight) 

     console.log("Current % of pressure is: " + percent + ". Current height is: " + newHeight + "px"); 

     $("#golfBall").animate({ 
      marginTop: newHeight + "px" 
     }, 1, function(){ 

     }); 
    } 
    else 
    { 
     showResult(); 
    } 
}; 

什麼我錯在這裏做的，這種方法被稱爲每秒10次，所以我猜這個值可能迅速貶值，但爲什麼我的上升法的工作？

崛起算法：

function rise() 
{ 
    if(HIGHEST_VAL > 200) { 

     // Difference between the destination element and golfBalls starting position 
     var offset = = $("#golfBall").offset().top - $("#progress .circleContainer").first().offset().top; 

     // Calculate the height for the ball to rise by - this is done by finding the percentage 
     // and then checking if that value is greater than the max progress, if so we then compute 
     // how many pixels we want to rise by 
     var percentage = (HIGHEST_VAL/TEST_VALUE) * 100; 
     if(percentage > CURR_PROGRESS) 
     { 
      CURR_PROGRESS = percentage; 
      totalHeight = (offset/100) * CURR_PROGRESS; 

      if (totalHeight >= labelOffset) 
       $("#message").animate({ opacity: 0 }); 
     } 
     // track the total height that has been computed - we don't want to exceed the offset 
     if (totalHeight > offset) 
      totalHeight = offset; 

     // Make the ball rise. 
     $("#golfBall").animate({ 
      marginTop: -totalHeight + "px" 
     }, 1, function(){ 
      if(CURR_PROGRESS >= 100) 
       testPressure(); 
     }); 
    } 
}; 

任何建議，將不勝感激

Answer 1

，我的算法是行不通的，因爲每次我depressure()方法被調用，我計算基於百分比的原因球電流從頂部偏移。這導致每次調用該方法時該值急劇下降。

爲了解決這個我添加了一個全球TOP_POSITION_SET然後每次計算的偏移百分比基於初始位置從頂部設置：

function depressure(value) 
{ 
    $("#message p").html("RELEASE PRESSURE"); 
    console.log("DEPRESSURING") 

    // Get the amount to de-pressure the height by 
    if(value > 100) 
    { 
     // Set the initial top position 
     if(!TOP_POSITION_SET) 
     { 
      topPosition = parseInt($("#golfBall").css('margin-top')); 
      TOP_POSITION_SET = true 
     } 

     var percent = value/HIGHEST_VAL * 100; 
     console.log("Current percentage is: " + percent) 

     var newHeight = topPosition/100 * percent; 
     console.log("Current offset from top is: " + newHeight) 
     if(newHeight < oldHeight) 
     { 

      console.log("Current % of pressure is: " + percent + ". Current height is: " + newHeight + "px"); 
      $("#golfBall").animate({ 
       marginTop: newHeight + "px" 
      }, 100) 
     } 

     oldHeight = newHeight 
    } 
    else 
    { 
     showResult(); 
    } 
}; 

感謝所有的幫助