js定时器之setTimeout的使用

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

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

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

  

  这里直接上代码:

1
2
3
4
5
6
7
8
9
<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>

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

posted @   江峰★  阅读(714)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示