js定时器之setTimeout的使用

Posted 2020-10-18 心欲无痕

　　之前用过定时器，只不过用的不是很多，关于js定时器，一般而言我们很容易想到setInterval和setTimeout这两种。

　　刚开始学js定时器时，记住了setInterval,该方法一般用于每隔多久就调用定时器中的方法一次，是可以循环执行的，而setTimeout则是过多久后才执行定时器中的方法，只执行一次。所以我就想当然的以为如果要循环调用某方法，就得使用setInterval，如果是只调用某方法一次，就使用setTimeout，却发现原来我错了，其实，setTimeout也可以循环执行某一方法。但是必须将该定时器放在一个函数中，在外面调用这个函数，这样，函数里的定时器就可以循环执行了。

　　例如，我要实现点击一个按钮，然后旁边的输入框中的值实现累加效果。如图：

　　

　　这里直接上代码：

<input type="button" value="按钮" onclick="getVal()"><input type="text" id="num" value="0">
<script>
    function getVal(){
	var val = document.getElementById(\'num\').value; // 获取输入框中的值
	val++; 
	document.getElementById(\'num\').value = val;
	setTimeout(getVal,1000)  // 一秒后调用getVal方法
    }
</script>

　　这里是将定时器放在函数中，然后通过点击按钮来调用该函数，从而实现定时器循环执行。