精华内容
下载资源
问答
  • setinterval 执行后 清除
    2021-03-27 10:52:34

    缘由: 想定期重复执行某函数,结果发现setInterval只执行了一次

    错误的写法

    setInterval( heartbeat(), 10000);

    正确的写法

    正确方式1:函数名不要带上小括号()

    setInterval( heartbeat, 10000);

    正确方式2:函数名带小括号,用引号包起起来

    setInterval( 'heartbeat()', 10000);

    当然,下面这种写法也正确的

    setInterval(function(){ console.log("--heartbeat--"); }, 10000); 

    顺便提醒一下,可以用clearInterval(timerId)来清除定时器

    比如

    timerId = setInterval( function { console.log("--hearbeat--"); }, 10000 );
    
    clearInterval( timerId );

     

    更多相关内容
  • setTimeout() 方法用于在指定的毫秒数调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。从定义上我们可以看到两个函数十分类似,只不过前者执行一...
  • setTimeout() 方法用于在指定的毫秒数调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。也就是说setTimeout()只执行一次,setInterval()可以执行多...
  • 多个定时器一起跑就会有这个问题 ,打开之前先关闭一个 应用场景, 点击打开dom抖动,点击关闭dom抖动 点击抖动 关闭抖动 重点在点击时先清除timer定时器

    多个定时器一起跑就会有这个问题 ,打开之前先关闭一个

    应用场景, 点击打开dom抖动,点击关闭dom抖动

     

    <style>
            *{margin: 0; padding: 0;}
            .name{
                background: turquoise;
                height: 100px;
                width: 100px;
                position: absolute;
                left: 0;
                top: 0;
                overflow: hidden;
            }
            .btn{
                position: absolute;
                left: 0;
                top: 120px; 
            }
        </style>
    
    <body>
        <div id="name" class="name"></div>
        <div class="btn">
            <button id="on">点击抖动</button>
            <button id="off">关闭抖动</button>
        </div>
    </body>
    
    <script>
        //3. dom点击抖动
    
        let div1 = document.getElementById('name');
        let onbut = document.getElementById('on');
        let offbut = document.getElementById('off');
        let timer =null 
        onbut.onclick =function(){
            clearInterval(timer)
            timer = setInterval(function(){
                div1.style.left = Math.random() * 10 + 'px';
                div1.style.top = Math.random() * 10 + 'px';
            },30)
        }
        offbut.onclick =function(){
            console.log('点击了清除')
            clearInterval(timer)
        }
    </script>

    重点在点击时先清除timer定时器

    展开全文
  • setInterval(target, 1000) 这样看起来没啥问题,但一般我们在使用定时器需要注意:不能让页面产生多个执行同一操作任务的定时器,不然很可能导致你的页面功能异常,并且消耗掉不必要的系统资源,所以需要封装一下...

    1、常规操作

    首先定义一个需要执行的目标操作函数 target,然后在执行定时器之前先执行函数,再开启定时器:

    const target = () => {
      console.log('Do something...')
    }
    
    target()
    setInterval(target, 1000)
    

    这样看起来没啥问题,但一般我们在使用定时器需要注意:不能让页面产生多个执行同一操作任务的定时器,不然很可能导致你的页面功能异常,并且消耗掉不必要的系统资源,所以需要封装一下:

    const target = () => {
      console.log('Do something...')
    }
    
    const setIntervalImmediately = (func, interval) => {
      func()
      return setInterval(func, interval)
    }
    
    // 定义一个全局的定时器变量timer,用于保存和清除定时器
    // 调用之前,检查定时器是否存在,存在则清除
    timer && clearInterval(timer)
    timer = setIntervalImmediately(target, 1000)
    

    上面 setIntervalImmediately 返回一个定时器,可便于判断清除定时器,保证全局只存在唯一执行同一操作任务的定时器

    2、执行目标函数返回其本身

    与【常规操作】中代码看起来比较类似,但注意有很大不同:在调用 setInterval 时传入的第一个参数 target 是加了‘()’的,所以会立即执行 target 函数,执行完后,返回 target 本身(函数名),这个 target (函数名)才是 setInterval 需要接收的真正参数,接下来定时器才算是正常的运行。
    这就是为啥要在 target 函数中最后返回其本身的原因了。

    const target = () => {
      console.log('Do something...')
      return target
    }
    
    // 定义一个全局的定时器变量timer,用于保存和清除定时器
    // 调用之前,检查定时器是否存在,存在则清除
    timer && clearInterval(timer)
    timer = setInterval(target(), 1000)
    

    3、使用立即执行函数

    与【执行目标函数返回其本身】处理逻辑一致,唯一不同的只是将 target 函数变成立即执行函数传入到 setInterval 中,在 target 函数中还是会返回其本身。

    // 定义一个全局的定时器变量timer,用于保存和清除定时器
    // 调用之前,检查定时器是否存在,存在则清除
    timer && clearInterval(timer)
    timer = setInterval((function target () {
      console.log('Do something...')
      return target
    })(), 1000)
    

    4、小结

    方案1作为常规方式,更具有易用性,在多人开发合作过程中,比如A封装了 setIntervalImmediately 方法,而 target 函数则是由B开发,那B就不用管 target 函数的返回内容,可以直接拿 setIntervalImmediately 方法过来使用,反观方案2和方案3,限制了 target 函数只能返回其本身,当 target 函数属于公有方法,另有它用,想返回其它内容就不行了,失去了灵活性又增加了耦合度。
    所以,常规操作,特别是团队合作中存在共用的,首选方案1,要是自己单独开发自用的则可以考虑方案2或者3。

    展开全文
  • 如何清除setInterval执行

    千次阅读 2015-07-01 11:45:06
    js的 setInterval函数,这个函数只有在手动调用了clearInterval(threadid); 或者关闭页面才会停止 但是我们的整个系统都是用ajax加载dom的,不会有关闭页面的情况,所以这个请求点击到别的页面的时候还一直在发送...

    我们整个系统都是ajax实现的,但是其中有一些页面需要用到定时取数据,所以用了

    js的 setInterval函数,这个函数只有在手动调用了clearInterval(threadid); 或者关闭页面后才会停止

    但是我们的整个系统都是用ajax加载dom的,不会有关闭页面的情况,所以这个请求点击到别的页面的时候还一直在发送


    怎么停止呢,在同一的接口处停止这个ID


    下面贴上我的代码,一看就明白了

    //ajax刷新数据
    <span style="font-size:18px;">
    <span style="color:#990000;">function get_ajax_data()
    {	
    	
    	var maxdate = $("input[name='maxdate']").val() ;
    		$.post(
    			'/visitor/realtime/index',
    			{'real_ajax':1,'maxtime':maxdate},
    			function(data)
    			{	
    				$("input[name='maxdate']").val(data.maxdate) ;
    				if(data.status == 1)
    				{
    					var html = "<li><span>"+data['data'].realname+"</span><span>"+data['data'].report_name+"</span><span>"+data['data'].ip+"</span><span>"+data['data'].date+"</span></li>" ;
    					
    					$('.infoList li').first().before(html) ;
    					$('.next').click() ;
    					
    				}
    			},
    			'json'
    		);
    }
    
    window.queen_id = setInterval(get_ajax_data,6000) ;</span></span>
    <span style="font-size:18px;color:#990000;">
    </span>
    <pre name="code" class="javascript"><span style="font-size:18px;color:#990000;">//清楚所有页面中的ajax请求
    		if(typeof window.queen_id != 'undefined')
    			window.clearInterval(window.queen_id) ;</span>


     
    

    展开全文
  • 怎么清除setInterval

    万次阅读 2018-12-18 15:26:54
    我们在变量中设置一个全局变量,然后让begin=sertInterval,清除的时候直接清除我们的全局变量即可,这个小demo原本是为了执行如果flag=true刷新那么五秒刷新一次异步提交,这里为了方便改为我们学任何语言的第一步...
  • setTimeout() 方法用于在指定的毫秒数调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。也就是说setTimeout()只执行一次,setInterval()可以执行多...
  • 指定定时执行的函数时不要使用引号和括号。 代码如下:$(function(){function show(){ alert(“ready”);}setInterval(show,3000);// 注意函数名没有引号和括弧! // 使用setInterval(“show()”,3000);...
  • setinterval和settimeout的区别 在vue.js项目中,经常需要对数据实时更新——每隔xx秒需要... setTimeout(function(){}, milliseconds)——只执行函数一次 乍看之下,setInterval会符合我们的业务需求,然而
  • vue中setInterval的立即执行
  • 方法一: 在每次重新设置定时器之前清除掉 方法二: 在销毁的钩子函数里销毁,防止污染 都是clearInterval(定时器...settimeout与setinterval清除时使用方式一致,即clearsetTimeout()、clearInterval() ...
  • clearInterval()失效的原因:setInterval()每执行一次,则返回一个唯一id。所以setInterval()执行了n次,那么需要调用clearInterval()也是nci。出现clearInterval()失效的情况,请查看每次调用setInterval()是否都...
  • js清除setInterval、setTimeout

    千次阅读 2021-08-16 15:11:17
    var id=window.setInterval(function(){ doSomething; },1000); window.clearInterval(id);
  • 3、浏览器切换定时器停止执行,浏览器切换tab页面,切换回去,仍有计数,并停止 解决方法 1、在loading结束,再开始计数 2、抽离代码,模块化 3、浏览器监听事件 document.addEventListener(...
  • WindowOrWorkerGlobalScope 的 setInterval() 方法重复调用一个函数或执行一个代码段,在每次调用之间具有固定的时间延迟。 在窗口和工作接口上提供的setInterval()方法重复调用函数或执行代码片段,每次调用之间有...
  • 目前开发数据大屏,一个大屏有10几个定时器在执行,15s执行一次, 导致每次内存以几十甚至几百k增加,由于大屏一直开启在,执行定时器的时候有一些内存清理不掉, 会是浏览器挂断
  • setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,setTimeout()方法用于在指定的毫秒数调用函数或计算表达式,详细使用方法可以参考下本
  • 前几天学了js,看到了两个非常有趣的函数,他们分别是setTimeout函数和setInterval函数,这两个函数能使网页呈现非常一些网页...code (必需):要调用的函数执行的 JavaScript 代码串。 millisec(必需):在执行
  • setTimeout和setInterval使用方法 定时器两个参数,第一个是执行代码,第二个是执行时间。执行时间自己随便设置,执行代码有以下几种方式传入: 1.匿名函数形式传入 setTimeout(function() { console.log('time1')...
  • setinterval定时器可以反复的执行 <script> var position = document.getElementById("position"); var positionImgs = position.getElementsByTagName("img"); var index = 0; ...
  • 具体不同在于,window.setInterval执行完比返回一个id,而vue实例中返回【定时器对象】,当然该对象中包含一个_id的私有属性 因为 clearInterval 方法参数是id,所以最佳实践是统一使用 window 的方法,不要使用 ...
  • js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout 一、循环执行setInterval) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁...
  • this.reGetData = setInterval(() => { this.fetchData(); }, 60000); 清除定时器: 在vue的beforeDestroy钩子函数里: beforeDestroy: function() { if (this.reGetData) { //如果存在定时器就清除 ...
  • 倒计时清除 setInterval 倒计时5s跳转页面, clearInterval(this.handler); 清除倒计时 不执行倒计时里面的跳转, 点击事件强制跳转到其他页面 并且清除 倒计时任务 // 倒计时 cutDown() { this....
  • setTimeout只执行一次 setInterval在指定的延时间隔重复执行 清除: var ctime = setTimeout(“xxxxx”,30000); clearTimeout(ctime); var begin = setInterval(“xxxxx”,30000); clearInterval(begin); ...
  • 在图片轮播中点击下一张图片按钮,setinterval定时器多次初始化,导致清除失效 在使用定时器做图片轮播时,连续两次点击下一张图形会越走越快,清除定时器失效 <div class="out"> <div id="container...
  • window.setInterval()方法可以按照指定的周期执行执行一段程序。周期是以毫秒为单位的,本文给大家介绍window.setInterval()方法的定义和用法,感兴趣的朋友参考下
  • window对象有两个主要的定时方法,分别是setTimeout 和 setInteval 他们的语法基本上相同,但是完成的功能取有区别。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,809
精华内容 9,123
关键字:

setinterval 执行后 清除