Question

当start变量为true时，此代码淡入并淡出div #shape。当我从事件“click”调用“start”方法时，浏览器停止工作，因为while inside方法是不定式的，并且“click”事件在“start”方法完成之前没有完成。我希望该方法在“click”事件完成后运行。我该怎么办？

CSS

#shape {
     background-color:red;
     width:100px;
     height:100px;
     display:none;
 }

HTML

 <div id="shape"></div>
    <button id="startButton">start game!</button>

JS

var start = false;
$("#startButon").click(function () {
    start = true;
    startGame();
});

function startGame() {
    while (start == true) {
        $("#shape").fadeIn(1000).delay(1000).fadeOut(1000);
    }
}

Answer 1

你不需要旗帜，只需要做一个递归函数。我将时间更改为300毫秒，以便您可以更轻松地看到它

http://jsfiddle.net/zfbptz9c/

$("#startButton").click(function () {
    startGame();
});

function startGame() {
    $("#shape").fadeIn(300, function () {
        $("#shape").fadeOut(300, function () {
            startGame();
        });
    });
}

div将在淡入淡出时淡入淡出，淡出然后再次调用startGame函数，整个过程将无限重复。

或者，只有当您只需要定位现代浏览器时，才可以使用css实现此目的。我会把这个小提琴链接放在这里，这是一个不同的问题。我不会粘贴代码，因为你没有用css标记问题，但小提琴显示了所有内容。我不相信它。

How can I create a looping fade-in/out image effect using CSS 3 transitions?

http://jsfiddle.net/FTLJA/261/

Answer 2

JavaScript在单线程环境中运行，这意味着一旦进入无限循环，您只能从其中退出循环。在同步执行中，就像你在这里一样，循环外的代码不会影响循环条件。

就你的问题而言，人们提出了诸如制作递归函数或使用CSS3过渡等解决方案。

另一种可能的方法是使用setTimeout和/或setInterval等定时功能

下面的代码会在点击开始按钮后直到每秒发生淡入/淡出，直到点击停止按钮。

var toggle = true;       // flag for animation direction
var shape = $("#shape"); // so we don't select the shape each time we animate
var duration = 1000;     // animation duration
var delay = 1000;        // delay between animations
var timerId;             // timer id returned by setInterval

// start animating the shape after the delay
$("#startButton").click(function() {
  timerId = setInterval(animate, delay);
});

// stop animating the shape and hide it
$("#stopButton").click(function() {
  clearInterval(timerId);
  shape.css('display', 'none');
});

// function that animates the shape depending on the toggle flag
function animate() {
  if (toggle) {
    shape.fadeIn(duration);
    toggle = false;
  } else {
    shape.fadeOut(duration);
    toggle = true;
  }
}

#shape {
  background-color: red;
  width: 100px;
  height: 100px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shape"></div>
<button id="startButton">start game!</button>
<button id="stopButton">stop game!</button>

如何使这种淡入/淡出无限？

2 个答案: