1. 全栈程序员必看首页

js中setTimeout和clearTimeout的使用

全栈程序员-站长 • • 未分类 • 阅读 0

js中setTimeout和clearTimeout的使用一、概念1、js中可以通过setTimeout函数设置定时器，让指定的代码在指定的时间运动. 如果我们希望在setTimeout之行前终止其运行就可以使用clearTimeout()。2、clearTimeout()用于重置js定时器，如果你希望阻止setTimeout的运行，就可以使用clearTimeout方法。二、使用场景1、写计时器2、需要让程序隔一

一、概念

1、js中可以通过setTimeout函数设置定时器，让指定的代码在指定的时间运动. 如果我们希望在setTimeout之行前终止其运行就可以使用clearTimeout()。

2、clearTimeout()用于重置js定时器，如果你希望阻止setTimeout的运行，就可以使用clearTimeout方法。

二、使用场景

1、写计时器

2、需要让程序隔一段时间处理什么事情，如3秒后自动关闭弹出框等

3、事件延迟，满足业务需求，如鼠标从主菜单moveout的时候，判断鼠标是否moveover副菜单，再隐藏副菜单。

三、使用方法

[html] 
view plain
 copy

  1. <html>  
  2. <head>  
  3. <script type=“text/javascript”>  
  4. var c=0  
  5. var t  
  6. function timedCount()  
  7. {  
  8. document.getElementById(‘txt’).value=c  
  9. c=c+1  
  10. t=setTimeout(“timedCount()”,1000)  
  11. }  
  12.   
  13. function stopCount()  
  14. {  
  15. clearTimeout(t)  
  16. }  
  17.   
  18. </script>  
  19. </head>  
  20.   
  21. <body>  
  22. <form>  
  23. <input type=“button” value=“开始计时！” onClick=“timedCount()”>  
  24. <input type=“text” id=“txt”>  
  25. <input type=“button” value=“停止计时！” onClick=“stopCount()”>  
  26. </form>  
  27.   
  28. <p>  
  29. 请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。  
  30. </p>  
  31.   
  32. </body>  
  33.   
  34. </html>  
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/213558.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0

相关推荐

  • Windows键失灵的三种处理方式「建议收藏」

    Windows键失灵的三种处理方式「建议收藏」

    Windows键失灵的三种处理方式「建议收藏」对于经常使用电脑学习或者工作的我们来说，特别是搞编程的小伙伴们。Windows键的失灵将会导致我们的工作效率大大降低，比如：Win+E快速打开我的电脑；Win+R快速打开命令行等，许多组合键都不能使用，好烦躁。不要急，先看看这篇文章，可能有惊喜哦！

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月4日
  • Java将Map数据转换为JSON对象数据

    Java将Map数据转换为JSON对象数据

    Java将Map数据转换为JSON对象数据//pom.xml导入jar包<!–拼接json–><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</versi…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月6日
  • Python—海龟作图

    Python—海龟作图

    Python—海龟作图1、因为海龟作图需要用到”turtle”库，所以先介绍库的三种引用方法：（1）：from库名import函数名/*；（2）：import库名——>使用时：库名.函数名（3）：import库名as函数名2、turtle的使用方法：（1）Turtle库是Python语言中一个很流行的绘制图像的函数库，想象一个小乌龟，在一个横轴为x、纵轴为y的坐标系原点，(0,0)位置开始，它根据一组函数指令的控制，在这个平面坐标系中移动，从而在它爬行的路径上绘制了图形。（2）画布：就是海

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月28日
  • <span role="heading" aria-level="2">bind-chroot和dnssec技术实战

    bind-chroot和dnssec技术实战

    bind-chroot和dnssec技术实战安装部署bind-chroot系统环境服务器：腾讯云主机，有公网IPOS：CentOSLinuxrelease7.4.1708(Core)bind-chroot：bind-chroot-9

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月3日
  • python中关于命名的例子_Python 命名规范入门实例「建议收藏」

    python中关于命名的例子_Python 命名规范入门实例「建议收藏」

    python中关于命名的例子_Python 命名规范入门实例「建议收藏」这篇文章主要为大家详细介绍了Python命名规范入门实例，具有一定的参考价值，可以用来参考一下。对python这个高级语言感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！一，包名、模块名、局部变量名、函数名全小写+下划线式驼峰example：this_is_var二，全局变量全大写+下划线式驼峰example：GLOBAL_VAR三，类名首字母大写式驼峰example：ClassNa…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月25日
  • pycharm运行没结果_pycharm安装lxml库

    pycharm运行没结果_pycharm安装lxml库

    pycharm运行没结果_pycharm安装lxml库原因是用程序选择了console来运行，取消console方法如下：Run-&gt;EditConfigurations取消runwithpythonconsole的勾

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月28日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号