精华内容
下载资源
问答
  • setinterval 延迟
    2019-07-24 22:15:56

    最近经常遇到这样的问题:需要间隔多少秒获取一次数据。实际中,往往采用setInterval来实现,但是当参数传递不当时,会出现先延迟了一段时间后再执行获取的数据的函数。如:

    var data1=0;
    function count1(){
      console.log("count1:",data1++);
    }
    setInterval(count1,1000);
    

    此时可以观察控制台,发现打印第一次会有延迟。如:

    查看setInterval官方文档不难发现:

    var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
    var intervalID = window.setInterval(code, delay);
    Parameters
    

    func
    A function to be executed every delay milliseconds.

    code
    An optional syntax allows you to include a string instead of a function, which is compiled and executed every delay milliseconds. This syntax is not recommended for the same reasons that make using eval() a security risk.

    因此,应该先执行以下原函数,再返回该函数给setInterval周期执行。此时可以如下实现:

    var data2=0;
        var count2= function(){
          console.log("count2:",data2++);
          return count2;//若不返回时,此函数只会执行一次
        }
        setInterval(count2(),1000);
    

    这里也可以采用arguments.callee等方式指代当前函数。如:

    不过也可以这样写:

       var data3=0;
       (function count3(){
           console.log("count3:",data3++);
           setTimeout(count3,1000);
       })();
    
    更多相关内容
  • setInterval延迟问题

    多人点赞 2020-03-08 11:35:37
    setInterval()方法重复调用一个函数或执行一个代码段,在每次调用之间有固定的时间延迟。 setTimeout()方法设置一个定时器,定时器到期后执行一个函数或一段代码。 let id = setInterval ( () => { var nowtime...

    遇坑场景

    倒计时

    原理

    setInterval()方法重复调用一个函数或执行一个代码段,在每次调用之间有固定的时间延迟。
    setTimeout()方法设置一个定时器,定时器到期后执行一个函数或一段代码。

    
    let id = setInterval ( () => {
    	var nowtime = new Date().valueOf(),  //获取当前时间
    	endtime = Date.parse(new Date("2020-07-10 10:21:12"));  //定义结束时间
    	var lefttime = endtime - nowtime;  //距离结束时间的毫秒数
    	if(lefttime>=0)
    	{
    		leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
    		lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
    		leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
    		lefts = Math.floor(lefttime/1000%60);  //计算秒数
    		$("#time").html(leftd + "天" + lefth + ":" + leftm + ":" + lefts);
    	}
    	else{
    		clearInterval(id)
    	}
    }, 1000)
    

    上面代码每秒倒计时一次。但是由于只读取一次时间延迟,设置好以后无法更改时间延迟。

    解决方法

    用setTimeout()来改写setInterval()可以解决这个问题。

    let duration = 1000
    let nowtime = new Date().valueOf()  //获取当前时间
    let id = setTimeout(function runAgain() {
       nowtime += 1000;
       endtime = Date.parse(new Date("2020-07-10 10:21:12"));  //定义结束时间
       var lefttime = endtime - nowtime;  //距离结束时间的毫秒数
       if (lefttime >= 0) {
           leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)),  //计算天数
               lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),  //计算小时数
               leftm = Math.floor(lefttime / (1000 * 60) % 60),  //计算分钟数
               lefts = Math.floor(lefttime / 1000 % 60);  //计算秒数
           $("#time").html(leftd + "天" + lefth + ":" + leftm + ":" + lefts);
       }
       else {
           clearTimeout(id)
       }
       setTimeout(runAgain, duration)
    }, duration)
    

    上面代码可以通过改变duration的值来改变时间延迟。setTimeout每次执行都会读取延迟时间,所以改变时间能立即生效。

    展开全文
  • 当使用setinterval时,发现它刚打开页面时会延迟一秒过后在执行。因为setinterval定时器先执行了自己的一秒钟,执行过后在对里面的内容进行操作,这样就会导致不能立即显示出来 举个例子:先创建一个div盒子,然后...

    当使用setinterval时,发现它刚打开页面时会延迟一秒过后在执行。因为setinterval定时器先执行了自己的一秒钟,执行过后在对里面的内容进行操作,这样就会导致不能立即显示出来

    举个例子:先创建一个div盒子,然后写script代码

    var div = document.querySelector('div');
    			var num = 10;
    			setInterval(function(){
    				if(num==1){
    					div.innerHTML = null;
    					return fn1;
    				}else{
    					num--;
    					div.innerHTML = '还剩'+num+'秒';
    				}
    			},1000);

    效果如图:

    它的会先执行那一秒钟,等一秒钟过了然后再执行里面显示的内容

    解决办法:

    直接调用

    var div = document.querySelector('div');
    			var num = 11;
    			function fn1(){
    				if(num==1){
    					div.innerHTML = null;
    					return fn1;
    				}else{
    					num--;
    					div.innerHTML = '还剩'+num+'秒';
    				}
    			}
    			setInterval(fn1,1000);
    			fn1();

    展开全文
  • 最近做了一个小定时器的功能,但是在标签页切换后,定时器就会出现延迟。后面发现是在页面切换后,浏览器会自动延迟执行我们的定时器,以便于节约资源。 例子:开启一个定时器:0.5秒数字自增 大概6秒执行了14次 ...

    最近做了一个小定时器的功能,但是在标签页切换后,定时器就会出现延迟。后面发现是在页面切换后,浏览器会自动延迟执行我们的定时器,以便于节约资源。

    例子:开启一个定时器:0.5秒数字自增

    大概6秒执行了14次

    切换标签页 大概11秒执行14次

    在我们切换标签页后,我们的定时器根据浏览器不同,已经能明显感觉到延迟了,这个时候如果我们要保持定时器精度,可以用web work来跑我们的代码,通过在worker里面开启定时器,发送message给外部,外部收到message,然后再执行操作,这样我们切换页面,但是worker不受影响,定时器就可以解决延迟了

    // time worker
    
    var intervalIds = {};
    
    // 监听message 开始执行定时器或者销毁
    self.onmessage = function(e){
        switch(e.data.command){
            case 'interval:start': // 开启定时器
                var intervalId = setInterval(function(){
                    postMessage({
                        message: 'interval:tick',
                        id: e.data.id
                    })
                },e.data.interval);
    
                postMessage({
                    message: 'interval:started',
                    id: e.data.id
                });
    
                intervalIds[e.data.id] = intervalId;
                break;
            case 'interval:clear': // 销毁
                clearInterval(intervalIds[e.data.id]);
    
                postMessage({
                    message: 'interval:cleared',
                    id: e.data.id
                })
    
                delete intervalIds[e.data.id];
                break;
        }
    }
    
    复制代码

    开启worker

    var worker = new Worker('./time-worker.js');
    
    var workerTimer = {
        id: 0,
        callbacks: {},
        setInterval: function(cb, interval, context) {
            this.id++;
            var id = this.id;
            this.callbacks[id] = { fn: cb, context: context };
            worker.postMessage({ command: 'interval:start', interval: interval, id: id });
            return id;
        },
    
        // 监听worker 里面的定时器发送的message 然后执行回调函数
        onMessage: function(e) {
            switch (e.data.message) {
                case 'interval:tick':
                    var callback = this.callbacks[e.data.id];
                    if (callback && callback.fn) callback.fn.apply(callback.context);
                    break;
                case 'interval:cleared':
                    delete this.callbacks[e.data.id];
                    break;
            }
        },
    
        // 往worker里面发送销毁指令
        clearInterval: function(id) {
            worker.postMessage({ command: 'interval:clear', id: id });
        }
    };
    
    worker.onmessage = workerTimer.onMessage.bind(workerTimer);
    复制代码

    然后我们使用的时候,直接用worker.setInterval或者workerTimer.clearInterval就可以了

    如果需要加入setTimeout,也是一样的步骤

    演示地址 完整代码

    转载于:https://juejin.im/post/5b02e0f4f265da0b82631a2b

    展开全文
  • 如何解决 setInterval 执行时间延时问题
  • 需要延迟执行的function中需要添加返回函数: 原js: var t = setInterval(scrollTop(),2500); function scrollTop(){ // ... } 更改: var t = setInterval(scrollTop(),2500); function scrollTop(){ // ......
  • 实际中,每每采用setInterval来实现,可是当参数传递不当时,会出现先延迟了一段时间后再执行获取的数据的函数。函数如:codevar data1=0;function count1(){console.log("count1:",data1++);}setInterval(count1,...
  • 好久之前的项目中用到了这两个,有时候作用会记混乱,这里... window.setInterval //延迟执行方法,只执行一次-使用1 setTimeout(function(){ //方法 },1500); //定时方法-使用...
  • JavaScript中setInterval传参常见的问题(setInterval第一个参数加引号与不加引号区别) function fun() { console.log("1"); } setInterval("fun()",1000);//全局作用域下正常执行 setInterval(fun(),...
  • 而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害. 下面的代码可以说明这个问题 ...
  • Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出...两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数。 setTimeOut用法
  • }, 如例所示:downloadFilePath方法需要用到getPmmlFilePath方法所返回的数据,此时就可以使用return new Promise 定时操作: setInterval(()=>{ //代码块 },间隔时间) 延时操作: setTimeout(() =>{ //要延迟的...
  • setInterval(“show()”,3000);});方法2. 指定定时执行的函数时不要使用引号和括号。 代码如下:$(function(){function show(){ alert(“ready”);}setInterval(show,3000);// 注意函数名没有引号和括弧! /...
  • window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下: ...
  • 如果想实现页面的一些函数的定时执行,需要用到下面的函数大家可以看下用法。
  • 本意是第一次立即执行,后续每隔一段时间执行,可是setInterval第一次进入页面就开始延迟。 网上搜到的方法没说清楚,直接在setInterval的函数后面加个括号确实只能执行一次,重点就是要有一个返回自身的return,...
  • delay为需要延迟的时间,单位为毫秒(可选参数,忽略该参数,则delay取默认值0,将立刻执行或尽快执行,实际的延迟时间可能比期待的delay值长; function为延迟一定时间后执行的函数 链接1 如何在延迟时间到达...
  • 使用setTimeout、setInterval函数时,第二个参数的设置的时间间隔t是自该函数(setTimeout(f1,t)、setInterval(f1,t))被调用时起,经过t毫秒后,f1被加入UI任务队列,但不一定执行,尤其是在期间有其他任务执行时...
  • 使用Query延迟一段时间后,JavaScript setInterval()函数将用于跳转到另一个页面。使用jQuery延迟5秒后跳转到另一个页面使用jQuery延迟5秒后重定向到另一个页面以下HTML标记由一个button和一个DIV组成,这个DIV包含...
  • 在Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉。 正常代码如下: beforeDestroy() { this._timer ...
  • 需求: ... 解决思路分享: ... 解决方法:延迟登陆,手动解决登陆的问题 2、登陆跳转到页面,存在iframe框架嵌入,多层嵌套,点击按钮跳转url地址不固定。 > 解决方法,尝试跳转到固定的url...
  • 两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数。 setTimeOut用法 setTimeout函数的用法如下: var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]); var t
  • js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout 一、循环执行(setInterval) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁...
  • 在使用setInterval(function,delayTime)方法时,发现它会为函数的第一次调用也做延迟。一般我们都是第一次立即调用,然后延迟调用。我的解决方法如下: 需要延迟调用的函数: function calli...
  • mounted(){ // 初始化 this.setl = setInterval(this.fn, 7000) }, methods:{ fn() { this.index ++ if (this.index > 2) { // 清除当前定时器,并重置 clearInterval(this.setl) thi...
  • 在vue点击事件调用函数的过程中,想通过 setTimeout() setInterval()函数来延迟修改参数时,发现函数没有执行,控制台也没有报错,代码如下: var vm_target = new Vue({ el: '#vm_target', data: { ...
  • 微信小程序使用 setInterval 制作计时器后台延迟问题 之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序——踢在浙大。 在小程序的设计过程中出现了一个裁判工具的功能,简单地说就是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,526
精华内容 6,210
关键字:

setinterval 延迟