Question

我尝试每100毫秒更改<p>元素的文本。每100毫秒，该数字变为n + 1。此循环仅在用户单击屏幕时执行。如果用户停止循环停止。

现在问题是变量scoren的当前值始终以0开头。这不是得分如何运作。如何编辑scoren仅在页面加载时使用0开始的代码，并在第二个mousedown之后使用当前值继续？另外，如何在scoren之后保存mouseup值，并以值？

恢复

我为此做了fiddle。

<p id="score">score:</p>

var loop;

function game() {
    var scoren = 0;
    score = setInterval(function() {
        scoren += 1;
        $('#score').text('score:' + scoren);
    }, 100);
}   

$(document).mousedown(function() {
    game();
});

$(document).mouseup(function() {
    clearInterval(score);
});

Answer 1

您需要首先了解范围在javascript中的工作原理。你正在重新初始化每个mousedown里的scoren变量。这个：

var loop;
var scoren = 0;
function game() {
  score = setInterval(function() {
    scoren += 1;
    $('#score').text('score:' + scoren);
  },100);

}   

$(document).mousedown(function() {
  game();
});

$(document).mouseup(function() {
  clearInterval(score);
});

Answer 2

您需要将var scoren = 0;行带到您的功能之外。

var loop;
var scoren = 0; //This line is important
function game() {

score = setInterval(function() {
    scoren += 1;
     $('#score').text('score:' + scoren);
},100);



}   
    $(document).mousedown(function() {
    game();
});

$(document).mouseup(function() {
clearInterval(score);
});

Answer 3

试试这个;）

var scoren = 0;

/* cache object to improve performance */
var scoreBoard = $('#score');

function game() {
  score = setInterval(function() {
    scoreBoard.text(++scoren);
  }, 100);
}   

$(document).mousedown(function() {
  game();
});

$(document).mouseup(function() {
  clearInterval(score);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>score:<span id="score"></span></p>

Answer 4

这是你可以做到的另一种方式。您可以创建一个可重用的对象：

＆＃13;

var loop;
var game = new Game();
function Game() {
    this.scoren = 0;
    this.score = null;
    this.start = function () {
    this.score = setInterval(function(currentGame) {
        	currentGame.scoren += 1;
        	$('#score').text('score:' + currentGame.scoren);
    	}.bind(null, this), 100);
    }
    this.stop = function () {
    	clearInterval(this.score);
		}
}

$(document).mousedown(function() {
    game.start()
});

$(document).mouseup(function() {
    game.stop();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="score">score:</p>

＆＃13;

每次有人点击您都可以重新使用相同的Game()对象，而不是创建新的Game() ...

变量值被clearInterval

4 个答案: