对象上的JavaScript递归永远不会结束

javascript recursive on object never ends

本文关键字：结束 永远 递归 JavaScript 对象      更新时间：2023-09-26

我的递归函数无法正确循环时遇到问题，底部是我遇到问题的代码，之前的东西只是为了表明我已经做了很多工作:)还有一个工作示例的链接。我之前使用了很多嵌套的 for 循环，如下所示：

function assembleTimeline(targetItem, sequence) {
    var TIMELINE = "";
    var greenAniArray = {options:{}};
    for (S = 0; S < sequence.length; S++) {
        greenAniArray = [];
        for (L = 0; L < sequence.length; L++) {
            alength = greenAniArray.length;
            for (var setting in sequence[S][L]) {
                greenAniArray.push({});
                if (setting == "duration") {
                    greenAniArray[alength]["duration"] = sequence[S][L][setting];
                    delete sequence[S][L]["duration"];
                }else{
                    greenAniArray[alength].push({});
                    for (var option in sequence[S][L][setting]) {
                        greenAniArray[alength]["options"][option] = sequence[S][L][setting][option];
                    }
                }
                if (greenAniArray[alength]["options"]) {
                    delete greenAniArray[alength]["options"]["duration"];
                }
                $(".jsonresults").html(prettyPrint(greenAniArray));
            }
        }
        animationSequence = greenAniArray[alength]["options"];
        animationDuration = greenAniArray[alength]["duration"];
        // Make commands look like this:
        // to($box, 1, {x:50,y:0})
        assembledTimeline += '.to("' + targetItem + '", ' + animationDuration + ', ' + JSON.stringify(animationSequence) + ')';
    }
    TIMELINE= "tl" + assembledTimeline; 
};

当有人建议递归函数时，可以解决这个问题，但是"序列"是一个数组，可以有一个项目，也可以有几十个项目。我正在将它放在一起以接受来自数组/对象的信息，其中包含我制作的动画序列：http://codepen.io/ajhalls/pen/QbvRbQ

http://codepen.io/ajhalls/pen/bdrmGw?editors=101

$(function() {
  var target = "targetDiv"
  var aniMation = "";
  var sequence = [{
    "duration": ".2",
    "transform": "translate3d(0,0,0)"
  }, {
    "duration": ".2",
    "transform": "translate3d(0, -30px, 0)"
  }, {
    "transform": "translate3d(0, -15px, 0)",
    "duration": ".2"
  }, {
    "transform": "translate3d(0,-4px,0)",
    "duration": ".2"
  }];
  function parseAnimation(target, sequence, count = 0) {
    for (var property in sequence) {
      duration = sequence[property]["duration"];
      delete sequence[property]["duration"];
      aniSequence = sequence[property];
      //$(".output").text(JSON.stringify(aniSequence)); 
      aniMation += '.to("' + target + '", ' + duration + ', ' + aniSequence + ')';
      $(".output").text(aniMation);
      parseAnimation(target, sequence[property], count++);
    }
  }
  parseAnimation(target, sequence);
});

您不需要对示例中的序列进行递归。 如果你有包含序列的序列，那么你将需要递归。

$(function() {
  var target = "target"
  var aniMation = "tl";
  var sequence = [{
    "duration": ".2",
    "transform": "translate3d(0,0,0)"
  }, {
    "duration": ".2",
    "transform": "translate3d(0, -30px, 0)"
  }, {
    "transform": "translate3d(0, -15px, 0)",
    "duration": ".2"
  }, {
    "transform": "translate3d(0,-4px,0)",
    "duration": ".2"
  }];
  function parseAnimation(target, sequence)
  {
    for (var property in sequence)
    {
      var s = sequence[property];
      var aniSequence = { "transform": s["transform"], "duration": s["duration"] };
      aniMation += '.to("' + target + '", ' + s.duration + ', ' + JSON.stringify(aniSequence) + ')<br>';
      $("#output").html(aniMation);
    }
  }
  parseAnimation(target, sequence);
});
相关文章：