如果值在变量中起作用，为什么 setInterval 方法不起作用?

Question

我需要js的帮助！我在 var 中使用函数来实现类型写入效果，并在 setInterval 方法中输入 var，它不起作用，但是当我在setInterval中输入相同的函数时，它为什么工作???

var button = document.getElementById('mybutton');
var mytext="thequickredfoxjumpsoverthelazybrowndog";
//var i=0;
//var typewriter = null;
// first code function in var 
var x = function() {
document.getElementById('type')
.textContent += mytext[i];
i = i + 1;
if (i > 20) {
clearInterval(typewriter);
}
};
mybutton.onclick = function() {
'use strict';
typewriter = setInterval(x, 10);
};

<input type="button" id="mybutton">
<div id="type"></div>

var button = document.getElementById('mybutton');
var mytext="thequickredfoxjumpsoverthelazybrowndog";
var i=0;
var typewriter = null;
// second  code function directly in setInterval
mybutton.onclick = function() {
'user strict';
var typewriter = setInterval(function() {
document.getElementById('type')
.textContent += mytext[i];
i = i + 1;
if (i > 20) {
clearInterval(typewriter);
}
}, 10);
};

<input type="button" id="mybutton">
<div id="type"></div>

Answer 1

变量i需要初始化，并且需要在javascript的窗口范围内。

变量typewriter需要初始化，并且需要在javascript的窗口范围内。你把它放在函数作用域内。

var button = document.getElementById('mybutton');
var mytext="thequickredfoxjumpsoverthelazybrowndog";
var i=0;
var typewriter = null;
// first code function in var 
var x = function() {
document.getElementById('type')
.textContent += mytext[i];
i = i + 1;
if (i > 20) {
clearInterval(typewriter);
}
};
mybutton.onclick = function() {
'use strict';
typewriter = setInterval(x, 10);
};

<input type="button" id="mybutton">
<div id="type"></div>