jQuery遞歸函數改為非遞歸函數

Question

對不起，這個問題可能是那些“愚蠢的問題”之一。 當我單擊名為“ animateButton”的按鈕時，此圓形進度條運行良好。 但是我想通過函數調用來啟動進度條，但是該函數沒有名稱，因為我猜想它在進度條中是遞歸的。 當我調用類似startIt（）的函數時，如何使函數啟動進度？

      $(function() {
      var $topLoader = $("#topLoader").percentageLoader({width: 60, height: 60, controllable : true, progress : 0.0, onProgressUpdate : function(val) {
          $topLoader.setValue(Math.round(val * 100.0));
        }});

      var topLoaderRunning = false;
      $("#animateButton").click(function() {
        if (topLoaderRunning) {
          return;
        }
        topLoaderRunning = true;
        $topLoader.setProgress(0);
        $topLoader.setValue('0kb');
        var kb = 0;
        var totalKb = 500; //100=2.7 1000=27

        var animateFunc = function() {
          kb += 1;
          $topLoader.setProgress(kb / totalKb);
          $topLoader.setValue(kb.toString() + 'kb');

          if (kb < totalKb) {
            setTimeout(animateFunc, 25);
          } else {
            topLoaderRunning = false;
          }
        }

        setTimeout(animateFunc, 25);

      });
    });      

我像這樣簡單地工作：

     startLoader = function() {
    var $topLoader = $("#topLoader").percentageLoader({width: 60, height: 60,    controllable : true, progress : 0.0, onProgressUpdate : function(val) {
  $topLoader.setValue(Math.round(val * 100.0));
      }});

   var topLoaderRunning = false;
if (topLoaderRunning) {
  return;
}
topLoaderRunning = true;
$topLoader.setProgress(0);
$topLoader.setValue('0kb');
var kb = 0;
var totalKb = 500; //100=2.7 1000=27

var animateFunc = function() {
  kb += 1;
  $topLoader.setProgress(kb / totalKb);
  $topLoader.setValue(kb.toString() + 'kb');

  if (kb < totalKb) {
    setTimeout(animateFunc, 25);
  } else {
    topLoaderRunning = false;
  }
}

setTimeout(animateFunc, 25);

   };

Answer 1

如果我正確理解了您的問題，則需要以下內容：

$(function() {
  var $topLoader = $("#topLoader").percentageLoader({width: 60, height: 60, controllable : true, progress : 0.0, onProgressUpdate : function(val) {
      $topLoader.setValue(Math.round(val * 100.0));
    }});

  var topLoaderRunning = false;
  var startIt = function() {
    // function body...
  };
  $("#animateButton").click(startIt);
});

如果需要按名稱訪問它們，則始終可以將函數分配給變量。

Answer 2

您已經擁有了所有部件，只需要對它們重新排序即可。 給您的函數命名，然后將該名稱分配給click事件。 然后，您可以在末尾通過名稱顯式調用該函數。

以下未經測試的代碼，但是我已經多次使用了這一原理。

$(function() {
  var $topLoader = $("#topLoader").percentageLoader({width: 60, height: 60, controllable : true, progress : 0.0, onProgressUpdate : function(val) {
      $topLoader.setValue(Math.round(val * 100.0));
    }});

  var topLoaderRunning = false;

  var startIt = function() {
    if (topLoaderRunning) {
      return;
    }
    topLoaderRunning = true;
    $topLoader.setProgress(0);
    $topLoader.setValue('0kb');
    var kb = 0;
    var totalKb = 500; //100=2.7 1000=27

    var animateFunc = function() {
      kb += 1;
      $topLoader.setProgress(kb / totalKb);
      $topLoader.setValue(kb.toString() + 'kb');

      if (kb < totalKb) {
        setTimeout(animateFunc, 25);
      } else {
        topLoaderRunning = false;
      }
    }

    setTimeout(animateFunc, 25);

  };

  $("#animateButton").click(startIt);

  startIt();
});