javascript - 变量值被clearInterval破坏

我尝试每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);
});

最佳答案

您需要首先学习作用域在javascript中的工作方式。您将在每次按下鼠标时重新初始化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);
});