Question

如何动态更新函数外部的变量，然后能够使用其他函数。在这种情况下，用户按下右键并移动50px。

<!doctype html>
<html>
  <head>

<title>Barry bounce</title>

<script src="js/plugins/charinfo.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body ng-app="myApp">

<div id="canvas">

  <img src="img/characters/BarryBall.png" id="barry" alt="">


</div>

</body>

<!-- jquery here -->

<script> 

var barryPosX;
var state = 0;

function getCurrentPos(position) {
  barryPosX = position.left;

};


$(document).keydown(function(e) {
  switch(e.which) {
    case 39:
      $("#barry").stop().animate({
        left: '+=350'
      }, function() {
          position = $("#barry").position();
          getCurrentPos(position);
            if(barryPosX > $("#canvas").width()) { 
              state = 1;
              console.log(state);
            }

      })
    break
    case 37:
      $("#barry").stop().animate({
        left: '-=350'
      });
    break
  }
})

    if (state == 1 ) {
    console.log(state);
}


</script>

我不明白为什么当图像超出'canvas'div宽度时，控制台没有记录'1'。任何想法？

Answer 1

barryPosX已经在全局范围内，因此您可以直接在getCurrentPos函数中将值分配给barryPosX，就像您已经完成的那样。您不需要在动画回调中将值分配给barryPosX。

如果您愿意，还可以将值传递给getCurrentPos函数，如下所示：

＆＃13;

var barryPosX;

function getCurrentPos(position) {
  barryPosX = position.left;
};

$(document).keydown(function(e) {
  switch(e.which) {
    case 39:
      $("#barry").stop().animate({
        left: '+=50'
      }, function() {
          position = $("#barry").position();
          getCurrentPos(position);
      })
    break
    case 37:
      $("#barry").stop().animate({
        left: '-=50'
      });
    break
  }
})

＆＃13;

barryPosX的值也可以在changeScreen函数中访问。

jquery - 动态更新animate函数外的变量

1 个答案: