精华内容
下载资源
问答
  • setinterval定时器60秒
    2021-07-27 15:45:37
     data () {
        return {
          timeR: null,
          timeE: 0,
        }
      },
    
      methods: {
        demo () {
          this.timeR = null
          this.timeR = setInterval(() => {
            this.timeE += 1
          }, 1000)
          // 以下是要使用定时器的函数
          // this.timeTest() ...
        },
        timeTest () {
          if (this.timeR) {
            clearInterval(this.timeR)
            this.timeE = 0
            console.log('超时了');
          }
          return
          // 以下事件就被中断了
          // ...
        }
      }
    
    更多相关内容
  • 正常情况下,在data里定义homeSetInterval 保存定时器的ID值 ,在销毁组件是使用clearInterval方法是可行的 但在使用了如下的keep缓存模式在使用销毁模式不行了 应该使用离开路由器前方法beforeRouteLeave 补充...
  • setInterval定时器

    千次阅读 2022-03-28 16:53:22
    setTimeout是延时时间到了就去调用这个回调函数,只调用了一次 就结束了这个定时器setInterval是 每隔这个延迟时间 就去调用这个回调函数 会调用很多次 重复调用这个函数。应用在网页中的一些轮播图上。 <!...

    setInterval语法规范:

    window.setInterval(调用函数,延时时间);

    与setTimeout区别:

    setTimeout是延时时间到了就去调用这个回调函数,只调用了一次 就结束了这个定时器。

    setInterval是 每隔这个延迟时间 就去调用这个回调函数 会调用很多次 重复调用这个函数。应用在网页中的一些轮播图上。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			setInterval(function() {
    				console.log('继续输出');
    			},1000);
    		</script>
    	</body>
    </html>
    

    清除定时器  clearInterval()

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<button type="button" class="begin">开启定时器</button>
    		<button type="button" class="stop">停止定时器</button>
    		<script type="text/javascript">
    			// setInterval(function() {
    			// 	console.log('继续输出');
    			// },1000);
    			var begin = document.querySelector('.begin');
    			var stop = document.querySelector('.stop'); 
    			var timer = null;  //如果不在这里进行全局变量的设置 后边的stop点击事件就认不出 timer 因为timer在begin的点击事件内定义 是局部变量 
    			//在函数内部定义的不带var的变量也是全局变量 因此在这里或许可以不用写var 直接timer = 。。。。
    			begin.addEventListener('click', function() {
    				timer = setInterval(function() {
    					console.log('ni hao ma');
    				}, 1000);
    			});
    			stop.addEventListener('click', function() {
    				clearInterval(timer);
    			});
    		</script>
    	</body>
    </html>
    

    京东倒计时例子:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			span {
    				display: inline-block;
    				width: 50px;
    				height: 50px;
    				background-color: #2F3430;
    				line-height: 50px;
    				text-align: center;
    				color: #FFF;
    				font-size: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<span class="hour">
    				1
    			</span>
    			<span class="minute">
    				2
    			</span>
    			<span class="second">
    				3
    			</span>
    		</div>
    		<script type="text/javascript">
    			var hour = document.querySelector('.hour');
    			var minute = document.querySelector('.minute');
    			var second = document.querySelector('.second');
    			var inputTime = +new Date('2022-3-29 08:00:00');
    			countDown();
    			setInterval(countDown, 1000);			
    			function countDown() {
    				var nowTime = +new Date();
    			
    				var times = (inputTime - nowTime) / 1000;
    				var h = parseInt(times / 60 / 60 % 24); //时
    				h = h < 10 ? '0' + h: h;
    				hour.innerHTML = h; //把剩余的小时给 小时黑色盒子
    				var m = parseInt(times / 60 % 60); //分
    				m = m < 10 ? '0' + m: m;
    				minute.innerHTML = m;
    				var s = parseInt(times % 60); //秒
    				s = s < 10 ? '0' + s: s;
    				second.innerHTML = s;
    			}
    		</script>
    	</body>
    </html>
    

    展开全文
  • Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
  • 博文链接:https://weiweichen1985.iteye.com/blog/193628
  • 原因:页面加载时我调用了1次函数A,然后又单独调用了一次定时器函数,导致调用了2次setInterval(),导致有setInterval_id有2个值。 通过打印定时器的值发现的问题。 clearInterval()只关闭了其中一个setInterval_id...
  • setInterval定时器使用(个人理解)

    千次阅读 2020-06-10 19:47:58
    setInterval()定时器的启动原则(通过实验得出的结论) 1:赋值定时器给timer变量时,应该是先执行定时器内的语句再赋值,假设是先赋值timer为定时器1(0s时触发的定时器),那么在执行clearInterval(timer)时,先...

    setInterval()定时器的启动原则(通过实验得出的结论)
    1:赋值定时器给timer变量时,应该是先执行定时器内的语句再赋值,假设是先赋值timer为定时器1(0s时触发的定时器),那么在执行clearInterval(timer)时,先赋值timer为定时器1(0s时触发的定时器),直接清空定时器1,clearInterval下面的语句则不执行。
    2、每次将定时器赋值给timer不会清空上一次定时器,上一次定时器仍然在启动,实验如下:
    代码:

    执行结果:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    从执行结果来看,onresize执行了两次(即窗口大小改变了两次),设置了两个定时器。
    过60000ms(即1min),应该执行了两个定时器,输出了两次innerWidth即946应该是输出了2次;
    假设(验证设想):
    1、设想1:clearInterval(timer)是为了清除最后一次的定时器,其它定时器在给timer赋值定时器被清除掉。每赋值一个定时器n(假设是第n个定时器)给timer(如果有定时器已经赋值给了timer),会自动将上一次赋值给timer的定时器(n-1)给清除掉,不需要使用clearInterval(timer)清除。写clearInterval(timer)实际只将最后一次清除了。
    2、设想2:clearInterval(timer)是为了清除每次的上一个定时器。每赋值一个定时器(假设是第n个定时器)给timer不会自动清除上一个定时器(假设是n-2个定时器)。
    验证结果:
    先设置定时器每1min执行一次,然后执行onresize,从第一张图中的两个null可以看出一共执行了两次onresize(也就是执行了两次onresize操作及里面的代码),也就是说在不同时刻触发了两个定时器,并且两个定时器都是在1min后执行。从第二张图(过1min后)可以看出,执行了两个定时器。从第三图可以看见,过2min后一共执行了4次定时器,也就是说,在1min过后又过1min又执行了两次定时器。也就说明,将第二个定时器赋值给timer并没有覆盖掉上一个定时器。
    所以,得出结论:将定时器赋值给变量(此时变量已经赋值了定时器),不会清除变量中之前赋值的定时器。
    代码:

    执行onresize,timer=null和timer=setInterval()两个语句并不是同时执行,而是先执行完timer=null,然后再根据定时器设置的间隔来执行定时器。

    代码:

    假设窗口改变事件从0s到0.5s时刻(假设onresize一共执行了6次,分别在0s、0.1s、0.2s、0.3s、0.4、0.5s时刻),定时器设置每过1000ms即1s执行一次,在0.5s时,窗口大小为1000px

            console.log(innerWidth)                 demo.innerHTML                      console.log(timer)                        timer发生的事件发生的事件
    0s时    由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null,此时定时器没有赋值给timer,      执行第一次onrisize,赋值timer为null,并在1s后启动定时器
                                                                                        执行输出timer时为null
    0.1s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第二次onrisize,赋值timer为null(覆盖),并在1s后(1s时)启动定时器
                                                                                      有赋值给timer,执行输出timer时为null
    0.2s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第三次onrisize,赋值timer为null(覆盖),并在1s后(1.1s时)启动定时器
                                                                                        有赋值给timer,执行输出timer时为null
    0.3s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第四次onrisize,赋值timer为null(覆盖),并在1s后(1.2s时)启动定时器
                                                                                        有赋值给timer,执行输出timer时为null
    0.4s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第五次onrisize,赋值timer为null(覆盖),并在1s后(1.3s时)启动定时器
                                                                                        有赋值给timer,执行输出timer时为null
    0.5s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第六次onrisize,赋值timer为null(覆盖),并在1s后(1.4s时)启动定时器
                                                                                        有赋值给timer,执行输出timer时为null
    /*0.5s后执行的语句*/
    0.5s后onresize没有执行,则不执行var tiemr=null语句和console.log(timer)语句   只执行在0~0.5s时刻所触发的onresize时,启动的定时器(里面的语句)。
    
    1s时:  执行第一次定时器,重新赋值timer为0s时触发的定时器并执行定时器里的语句,执行clearInterval(timer)语句,此时timer为空,                 赋值timer为0s时触发的定时器,执行定时器中的代码
            然后获得此时浏览器窗口宽度,并输出在控制台和demo盒子中(均为1000)
    
    1.1s时   执行第二次定时器,重新赋值timer为0.1时触发的定时器并执行定时器里的语句,执行clearInterval(timer)语句,清除timer为1s时执行的定时器,  赋值timer为0.1s时触发的定时器,执行定时器中的代码
            然后获得此时浏览器的宽度,并输出在控制台和demo盒子中(均为1000)
    


    */

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...跑马灯
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>跑马灯</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    </head>
    <body>
        <!-- 创建一个要控制的区域 -->
        <div id="app">
            <input type="button" value="开" @click="lang">
            <input type="button" value="关"  @click="stop">
            <h1> {{ mes }}</h1>
        </div>
        <!-- 注意: 在 app实例中,如果想获取 data上的数据,或者想要调用methods中的方法,
            必须通过this.数据属性名 或 this.方法名,来进行访问,这里的this,就表示我们 new 出来的 app实例对象 -->
        <script>
             var app = new Vue({
                 el:"#app",
                 data:{
                     mes:'我只想给你给你宠爱,这算不算爱',
                     intid:null, //在data上定义 定时器id
                 },
                //  封装方法
                //注意 app 实例,会监听自己身上 data 中所有数据的改变,只要数据一发生变化,就会自动把
                // 最新的数据,从data 上同步到页面中,
                 methods:{
                    lang(){
                        // ---------写一个定时器   然后没4秒走一轮-------
                        // var _this = this;
                        // setInterval(function(){
                        //       // 获取到第一个字符
                        // var start = _this.mes.substring(0, 1)
                        // //获取最后面所有字符
                        // var end = _this.mes.substring(1)
                        // //两者拼接起来  并赋值给this.mes   顺序不能写乱 不然出不来你想要的结果
                        // _this.mes =  end+start 
                        // },400)
                        // console.log(_this.mes)
    
                        //-------会实现 点击按钮,下边字会变动
                        // // 获取到第一个字符
                        // var start = this.mes.substring(0, 1)
                        // //获取最后面所有字符
                        // var end = this.mes.substring(1)
                        // //两者拼接起来  并赋值给this.mes   顺序不能写乱 不然出不来你想要的结果
                        // this.mes =  end+start 
    
                        //-------------------箭头函数    
                        //这一行是 直接关闭一次就开不了了
                        if (this.intid != null) return; 
                       this.intid=setInterval(() =>{
                              // 获取到第一个字符
                        var start = this.mes.substring(0, 1)
                        //获取最后面所有字符
                        var end = this.mes.substring(1)
                        //两者拼接起来  并赋值给this.mes   顺序不能写乱 不然出不来你想要的结果
                        this.mes =  end+start 
                        },400)
                        console.log(this.mes)
    
                    },
                    stop(){
                        //定义一个关闭定时器   在箭头函数 那边 this.intid =   指向定时器
                        clearInterval(this.intid)
                        //每当清除了定时器之后,需要重新把 intid置为null  
                        this.intid = null;
                    }
                 }
             })
        </script>
    </body>
    </html>
    
    展开全文
  • 定时器关不掉的问题
  • JS使用setInterval定时器导致前端页面卡死 原因 setinterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死你的网页。 其原因与JS引擎线程有关(需深入研究JS引擎线程) ,但是setTimeout是自带...
  • 两种方案清除定时器,开发者经常使用方案1,建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称: data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器: this.timer = (() => { ...
  • js--setTimeout、setInterval定时器.pdf
  • hook-setInterval定时器

    2021-12-28 14:25:17
    ​ 目标网站:aHR0cDovL3NwaWRlci53YW5...此时断点直接断住,但我们发现一直console的代码段是保存在setInterval定时器内的。 解决方案: 我们可以通过hook 的方式将定时器置空,从而阻断定时器代码执行。 setInt
  • 应该使用箭头函数,另外记得箭头函数中this指向定时器,所以在定时器之前用const that = this 在箭头函数中使用that指向vue data() { return { uname: "", pwd: "", phone: "", code: "", sendMsg: "发送...
  • 1=1000毫秒。 this.reGetData = setInterval(() => { this.fetchData(); }, 60000); 清除定时器: 在vue的beforeDestroy钩子函数里: beforeDestroy: function() { if (this.reGetData) { //如果存在...
  • 今天写了一个动态设置setInterval定时器时间间隔的功能,再次记录一下。 根据按钮对页面定时器进行开和关,根据输入框对定时器时间进行改变 下面是界面代码 <th >&nbsp;&nbsp;刷新频率():</...
  • js setInterval定时器

    2020-02-01 14:22:50
    setInterval:
  • js 定时器setInterval

    万次阅读 多人点赞 2021-01-24 23:40:15
    定时器setInterval1.setInterval开启定时器2.关闭定时器3.小练习:自动切换图片 1.setInterval开启定时器 * setInterval() * - 定时调用 * - 可以将一个函数,每隔一段时间执行一次 * - 参数: *...
  • 语法规范: 1window.setTimeout(调用函数,延时时间) ...4页面中可能有多个计时器 我们经常会给定时器加标识符 也就是名字 不同点: setTimeout只会调用一次setInterval重复调用根据延长时间 <!...
  • 日常开发中可能会遇到每过2请求接口的问题,查询某种状态的问题,通常应用于支付的场景, 最近项目开发中遇到这种需求,页面二维码每过...第一感觉大家都会想到使用setInterval 无限定时器解决就好了,但是这里面会遇
  • setTimeout是单线程,可以说是一部但不完全是 setInterval则是循环定时,但是...setTimeout定时器和setInterval定时器的嵌套使用及延时顺序 setTimeout(function(){ alert("hello"); setTimeout(function(){ alert
  • 首先来看下定时器的用法 1. setInterval(code,millisec[,”lang”]) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 参数 描述 code 必需,要调用的函数或要执行的代码串。 ...
  • 在js中setTimeout和setInterval都是用来定时的一个功能,下面这篇文章主要给介绍了JS中setInterval和setTImeout的this指向问题,文中通过示例介绍的很详细,有需要的朋友可以参考借鉴,一起来看看吧。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,058
精华内容 24,023
关键字:

setinterval定时器60秒