jquery递归函数转换为非递归函数

jquery recursive function to non-recursive function

本文关键字：递归函数 转换 jquery      更新时间：2023-09-26

很抱歉，这个问题可能是"愚蠢的问题"之一。我有一个圆形的进度条，当我点击名为"animateButton"的按钮时，它可以完美地工作。但我想用函数调用来启动progressbar，但函数没有名称，因为我想它在progressbbar中是递归的。当我调用像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);
   };

您已经拥有了所有的零件，只需要对它们重新排序一点。为函数指定一个名称，然后将该名称分配给单击事件。然后，您可以通过末尾的名称显式调用函数。

下面是未测试的代码，但我已经使用了很多次这个原则。

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

如果我正确理解你的问题，你想要这样的东西：

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

如果需要按名称访问变量，则始终可以将函数分配给变量。

相关文章：