为什么我的算法降低元件的高度不正常

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(); 
    } 
}; 

感谢所有的帮助