setTimeout和setIntval

最新推荐文章于 2023-03-01 09:14:49 发布
最新推荐文章于 2023-03-01 09:14:49 发布
阅读量463 收藏
点赞数
分类专栏： js css 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/as965874/article/details/102577001
版权
js 同时被 2 个专栏收录
26 篇文章 1 订阅
订阅专栏
css
7 篇文章 0 订阅
订阅专栏

原文链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 时间显示区域 -->
    <span id="seconds_content">0</span>
    
    <!-- 开始按钮 -->
    <button type="button" id="start" name="button">start</button>
    <!-- 结束按钮 -->
    <button type="button" id="stop" name="button">stop</button>
</body>
<script>
    
   // 解决点击加快问题
    // (function () {
    //         var seconds_content = document.getElementById("seconds_content");
    //         var start_btn = document.getElementById("start");
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         function setTimer() {
    //            time_count = setInterval(() => {
    //                count++;
    //                seconds_content.innerHTML = count;
    //            }, 1000);
    //         }

    //         start_btn.addEventListener("click",  () =>{
    //                 count = seconds_content.innerHTML;
    //                 clearInterval(time_count);
    //                 setTimer();
    //         });

    //         stop_btn.addEventListener("click", () => {
    //             clearTimeout(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })()

    //  (function () {
    //         var seconds_content = document.getElementById("seconds_content");
    //         var start_btn = document.getElementById("start");
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         function intervalLike() {
    //            time_count = setTimeout(() => {
    //                 seconds_content.innerHTML = count;
    //                 count++;
    //                 intervalLike();
    //             }, 1000);
    //         }

    //         start_btn.addEventListener("click",  () =>{
    //            intervalLike();
    //         });

    //         stop_btn.addEventListener("click", () => {
    //             clearTimeout(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })()
    // (function () {
    //         var seconds_content =  document.getElementById("seconds_content");
    //         var start_btn = document.getElementById("start");
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         start_btn.addEventListener("click",function () {
    //             seconds_content.innerHTML = count;
    //             time_count = setInterval(() => {
    //                 count++;
    //                 seconds_content.innerHTML = count;
    //             }, 1000);
    //         });

    //         stop_btn.addEventListener("click",()=>{
    //             clearInterval(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })()
    // (function () {
    //         // 显示时间
    //         var seconds_content = document.getElementById("seconds_content");
    //         // 开始按钮【点击开始计时】
    //         var start_btn = document.getElementById("start");
    //         // 停止按钮【点击停止计时】
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         // 给开始按钮添加点击事件，点击按钮，开始计时
    //         start_btn.addEventListener("click", function (event) {
    //             seconds_content.innerHTML = count;
    //             time_count = setInterval(function () {
    //                 count++;
    //                 seconds_content.innerHTML = count;
    //             }, 1000);
    //         });

    //         // 给停止按钮添加事件，点击按钮，停止计时
    //         stop_btn.addEventListener("click", function (event) {
    //             clearInterval(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })();
    // (function () {
    //         // 显示时间
    //         var seconds_content = document.getElementById("seconds_content");
    //         // 开始按钮【点击开始计时】
    //         var start_btn = document.getElementById("start");
    //         // 停止按钮【点击停止计时】
    //         var stop_btn = document.getElementById("stop");

    //         var count = 0;
    //         var time_count;

    //         function intervalLike() {
    //             time_count = setTimeout(function () {
    //                 count++;
    //                 seconds_content.innerHTML = count;
    //                 // 循环调用自身，达到和setInterval一样的效果
    //                 intervalLike();
    //             }, 1000);
    //         }

    //         // 给开始按钮添加点击事件，点击按钮，开始计时
    //         start_btn.addEventListener("click", function (event) {
    //             intervalLike();
    //         });

    //         // 给停止按钮添加事件，点击按钮，停止计时
    //         stop_btn.addEventListener("click", function (event) {
    //             clearInterval(time_count);
    //             count = 0;
    //             seconds_content.innerHTML = count;
    //         });
    //     })();
    
</script>
</html>
Ccoolor
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入js运行机制之--setTimeout／setInterval【深度理解】
orchid_djl的博客
04-13 513
    js是单线程机制。异步操作，如ajax请求、setTimeout/setInterval、js事件等，会等到同步程序执行之后，将异步操作放入任务队列中。    今天我们来看setTimeout／setInterval。    setTimeout的等待时间结束后，并不是直接执行的，而是推入浏览器的一个任务队列中，在同步队列结束后，再一次调用任务队列中的任务。（setInterval则是每隔...
javascript setTimeout和setInterval 的区别
10-29
JavaScript中的`setTimeout`和`setInterval`是两个重要的定时器函数，它们都属于全局`window`对象的方法，常用于在指定的时间后执行某段代码或周期性地重复执行某段代码。然而，它们的工作机制和用途有所不同。 1. ...
setTimeout和setIntelval的用法
学习也休闲
11-14 1638
setInterval   setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 语法 setInterval(code,millisec[,"
setTimeout和setInterval
过客如期的博客
04-01 1万+
一，setTimeout和setInterval介绍 1.很多人容易把setTimeout和setInterval理解成线程概念，其实不然，js是单线程的，setTimeout和setInterval的计时虽然运行在浏览器内核的定时触发器线程上，但真正的回调函数依然被添加到事件队列，在js引擎线程中执行。 2.setTimeout和setInterval的作用简单来说就是将一些操作延时执行。 二，...
setTimeout()和setInterval
ldcaws的专栏
04-04 287
在制作网页动态效果时，一定会遇到某些需求，要求某段程序等待多时时间后再开始执行，就像在我们的生活中一样，待会儿再开始做一件事。在JavaScript中主要通过定时器实现此类需求，特记录下来备忘。 一、setTimeout setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式（以毫秒为单位） 语法： setTimeout(函数表达式，毫秒数)； setTimeout()只...
17.setTimeout和setInverval方法
qq_41905827的博客
05-19 889
setTimeout() 主要有两个参数，第一个参数是方法，第二个参数是number(毫秒数)意思是过多少毫秒第一个参数传入方法开始执行。其中clearTimeout方法是用于清空setTimeout中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <bo.
BOM系列第一篇之定时器setTimeout和setInterval
09-01
在BOM系列的第一篇中，我们重点关注的是定时器`setTimeout`和`setInterval`，这两个方法是JavaScript中处理异步编程的重要工具。 `setTimeout`方法允许我们在指定的毫秒数之后执行一个函数或字符串。它接受两个主要...
setTimeout和setInterval的深入理解
01-21
大概半年前发表过一篇关于setTimeout和setInterval的文章，但是现在回去仔细一看发现其实存在很多不足以及错误。事实上，setTimeout和setInterval并没有我们字面上理解的那么简单。要真正掌握并理解这两个方法，还得...
javascript setTimeout和setInterval计时的区别详解
10-27
window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。
给c#添加SetTimeout和SetInterval函数
09-06
在JavaScript中，`setTimeout`和`setInterval`是两个非常重要的函数，它们分别用于在指定时间后执行一次回调函数和周期性地重复执行回调函数。然而，C#标准库并没有直接提供这两个函数，但我们可以根据JavaScript的...
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
10-19
主要介绍了JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求 的相关资料,需要的朋友可以参考下
setTimeOut和setinteval的区别
shy256的博客
12-13 192
学习前端的可能都知道js有2个定时器setTimeOut和setinteval。用的时候可能不是很在意，但是2者还是有区别的 setTimeout方法是定时程序，也就是在什么时间以后干什么。干完就完了. setInterval方法则是表示间隔一定时间反复执行某操作。 如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。 clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterv
浅谈settimeout和setinterval的区别
txun123的博客
04-17 4447
网站开发过程中经常会用到各种各样的定时任务，这时我们会用到setTimeout和setInterval方法，下面简单介绍下这两个方法的使用和区别 settimeout和setinterval的区别 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式， 而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。 也就是说setTimeout()只执行一次，setInterval()可以执行多次。 两个函数的参数也相同，第一个参数
setTimeout和setInterval区别，以及定时器的传参功能
觉醒法师的专栏
09-03 1502
setTimeout和setInterval都属性Javascript中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环下去。另外,setTimeout和setInterval还能通过扩展运算符形式进行传参；现在IE10及以上版本，其它主流浏览器中，都已支持。
JS 中setTimeout和set Interval之间的爱恨情仇
一水茶缘~~
08-10 683
在说起javascript中定时器的问题，需要事先明确这样几个概念：1，setTimeout：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式, 2，setInterval: setInterval()则是在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除； 3，clearInterval: setInterval定时器在执行之后会返回一个对应
【JavaScript】setlntval函数和内置类..
weixin_60719453的博客
01-18 890
去除前后空白trim <script type="text/javascript"> window.onload=function(){ document.getElementById("btn").onclick=function(){ var value=document.getElementById("username").value; var newValue=value.trim(); alert("--->"+newValue
js中的定时器 setTimeout()和setInterval()
不想学习的打工人的博客
03-01 2132
JavaScript 定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务，类似于我们生活中的闹钟。JavaScript 中提供了两种方式来设置定时器，分别是 setTimeout() 和 setInterval()
setInterval定时器
热门推荐
m0_62962469的博客
03-28 4万+
setInterval语法规范： window.setInterval(调用函数，延时时间); 与setTimeout区别： setTimeout是延时时间到了就去调用这个回调函数，只调用了一次 就结束了这个定时器。 setInterval是 每隔这个延迟时间 就去调用这个回调函数 会调用很多次 重复调用这个函数。应用在网页中的一些轮播图上。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g
setInterval()详解
听海的博客
09-25 7839
1，语法： setInterval ( code, milliseconds[, args...] ) 2，实例说明： 1，setInterval(test, 5000);//简单函数调用 2，setInterval(function(){         alert(site);     }, 5000);//该写法可以延长作用域，使其能够访问到非全局变量 3，setInt
setTimeout和setinterval
最新发布
02-25
setTimeout和setInterval是JavaScript中的两个定时器函数，用于在指定的时间间隔后执行一段代码。 setTimeout函数用于在指定的延迟时间后执行一次指定的函数或一段代码。它接受两个参数：要执行的函数或代码块，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值