精华内容
下载资源
问答
  • 实现setInterval刷新页面立即执行一次 问题:setInterval函数在刷新页面的时候第一次执行需要等到设置的循环时间到才执行 方法1:在setInterval函数前写一遍要执行的js代码(可实现,但不雅观),代码如下: ...

    实现setInterval刷新页面立即执行一次

    问题:setInterval函数在刷新页面的时候第一次执行需要等到设置的循环时间到才执行
    方法1:在setInterval函数前写一遍要执行的js代码(可实现,但不雅观),代码如下:

     console.log(“立即执行”);
    setInterval(function(){
      console.log(“立即执行”);
    },10000)
    

    方法2:代码如下:

    function fn() {
        console.log(“立即执行”);
        return fn    // 函数中返回自身
    }
    setInterval(fn(), 10000)    // 定时器中,函数先执行一次
    

    setInterval小知识:
    setInterval(fn(), 2000); 加括号 立即执行,且执行一次.
    setInterval(fn, 2000);不加括号,2秒后执行,且循环执行.

    实现setInterval同步执行

    问题:setInterval函数为异步执行(setTimeout同理),导致代码块没有执行完就进入到下一个执行条件了
    方法:代码如下:

    setInterval(function(){
    const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
    (async function loop() {
        for (let i = 0; i < 13; i++) {
    	    console.log(“停5秒前执行的代码”);
            await delay(5000);//线程停5秒后再执行后面的代码
            console.log(“停5秒后执行”);
        }
    })();
    },100000)
    
    展开全文
  • 代码启动后,setInterval可以实现间隔指定时间轮询执行我们定义的函数,但是如果需要启动项目后,首先立即执行一次自定义函数,然后再轮询执行,怎么办?看下面,先手动执行一次函数,然后再setInterval,就可以实现...

     代码启动后,setInterval可以实现间隔指定时间轮询执行我们定义的函数,但是如果需要启动项目后,首先立即执行一次自定义函数,然后再轮询执行,怎么办?看下面,先手动执行一次函数,然后再setInterval,就可以实现这需求。

    1000*60是60秒钟。

    function checkUndoFun(){
        //执行动作
        alert(11)
    }
    checkUndoFun();
    
    setInterval(checkUndoFunc, 1000*60);

     

    展开全文
  • 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执行一次?

    千次阅读 2019-12-25 16:34:38
    遇到的问题:setInterval函数只调用了一次? // 实例化vue对象 new Vue({ el:"#vue-app", data:{ name:"hello vue" }, created() { setInterval(this.test(),1000) ...

    遇到的问题:setInterval函数只调用了一次?

    // 实例化vue对象
        new Vue({
            el:"#vue-app",
            data:{
                name:"hello vue"
            },
            created() {
                setInterval(this.test(),1000)
            },
            methods: {
                test(name){
                    console.log(new Date(), name)
                }
            },
        })
    

    看setInterval文档:
    在这里插入图片描述
    这里的执行函数只是一个函数体内容,执行与否是与后面的millseconds有关,如果这里使用括号调用(如上述setInterval(this.test(),1000))函数return undefined,所以没有要执行的函数,所以这里setInterval调用的函数不加括号setInterval(this.test,1000)(或者你可以这样写)

     new Vue({
            el:"#vue-app",
            data:{
                name:"hello vue"
            },
            created() {
                console.log('setInterval')
                setInterval(this.test(),1000)
            },
            methods: {
                test(name){
                    console.log(new Date(), name)
                    return test
                }
            },
        })
    

    那我要说我还要加参数咧

    看上图文档参数:

    //setInterval(function, milliseconds, param1, param2, ...)
    setInterval(this.test,1000, '7777')
    //or 可以将test定义为全局函数
    setInterval("test('444')",1000)
    //or 直接写个函数
    setInterval(() => {
     this.test('444')
    },1000)
    

    补充

    慎用setInterva容易造成js setInterval堆积问题,如果要用一定记得window.clearInterval(定时器变量)

    js setTimeout实现setInterval递归定时器

    // js setTimeout实现setInterval递归定时器
        var count = 10, cancelPayTimeout = null
        var payObserver = function(time){
            --count
            if(count > 0){
                cancelPayTimeout = setTimeout(payObserver, time)
            }else{
                clearTimeout(cancelPayTimeout)
                alert('支付超时')
            }
        }
    
    展开全文
  • setInterval立即触发一次

    千次阅读 2020-12-16 14:30:45
    setInterval 表示每隔一段时间触发一次,第一次并不是立即触发 function fn() { console.log('abc') return fn // 函数中返回自身 } setInterval(fn(), 1000) // 定时器中,函数先执行一次
  • 立即执行且只执行一次? javascript   x_hola 2016年06月14日提问 关注 7 关注 收藏 2 收藏,3.1k 浏览 问题对人有帮助,内容完整,我也想知道答案 0 问题...
  • 定时循环加载数据,一直等到把数据加载完,才结束定时;
  • js setInterval定时...看完文章的同学可能发现只执行一次的解决方案就是改为setInterval(methodName, time);这种方式。可一个新的问题就是方法的参数怎么传递啊。我们看一下setInterval的定义 declare function s
  • 实现代码: var timer = setInterval(function () { if (that.data.imageUrl != "false") { console.log(that.data.imageUrl); // 关闭定时循环 clearInterval(that.d...
  • //第一种 var obj = setInterval(function () { console.log(123); clearInterval(obj) }, 1000); //第二种 var text = setTimeout(function () { console.log('timeout') }, 500 ...
  • 定时器只执行一次: 需要延迟执行的function中需要添加返回函数: 原js: var t = setInterval(scrollTop(),2500); function scrollTop(){ // ... } 更改: var t = setInterval(scrollTop(),2500); function ...
  • setInterval执行顺序

    千次阅读 2018-11-13 16:24:00
    虽然setInterval是前端会经常使用的一个函数,它的作用是循环执行任务。但是很多人在使用这个函数时还是会遇到很多问题。那么就来大致了解一下这个函数的运行机制。 setInterval的运行机制是,将指定的代码移出本次...
  • 为了控制要执行代码,就有一个js任务队列,这些任务会按照他们添加到队列的顺序执行,延时器的第二个参数告诉了js在过多长时间把当前任务添加到队列中,如果队列是空的,则添加代码立即执行,不是空的,那就让她等...
  • 在使用setInterval时发现先等待再执行,我傻傻地再写了一个初始化function。幸好今日突发奇想来查一查,以致于以后不再接着蠢下去。 解决方法 在使用setInterval(function,delayTime)方法时,发现它会为函数的第...
  • promise 马上执行,setTimeout会放到任务队列,最后执行setInterval 2 3 5 4 1 6 setInterval(()=>{ if (!flag){ console.log(6) flag=true } },1000) setTimeout(function () { console.log(1) }, 0);...
  • setInterval第一次不执行setInterval内函数为普通函数与箭头函数 this指向问题 setInterval第一次不执行 setInterval第一次不执行只要调用setInterval执行以下函数就行(就这样就行,不用想什么骚操作), 千万...
  • 使用setInterval定时调用带参数的函数的三个方法 https://www.cnblogs.com/superdg003/p/5996360.html 转载于:https://www.cnblogs.com/liangliping/p/11017245.html...
  • setTimeout 和 setInterval 经常被用来做网页上的定时器,允许为它指定一个毫秒数作为间隔执行的时间。当被启动的程序需要在非常短的时间内运行,我们就会给她指定一个很小的时间数,或者需要马上执行的话,[color=...
  • timer 的问题一般除了查看表达式以外,还要看下是否 clearInterval。...返回一个立即执行的 timer: setInterval((function niubi(){ // 在这里写一些你的业务 bug return niubi; })(),3000); ...
  • 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串。 2. 交互时间:周期性执行或调用表达式之间的...
  • setInterval第一次延迟问题
  • setInterval未完成时回调函数的执行

    千次阅读 2018-12-22 10:13:23
    在自己写轮播图玩的时候遇到了setinterval的问题,在网上查了很久,查到了一个非常满意的解答,并做了验证。 非常感谢作者mingttong,以下为转载内容 在参加360面试的时候面试官问到了这样的一道题: “setInterval...
  • 1、先说一个小问题,控制台上看到的字符串相同,实际...2、进入正题,setInterval可以实现执行一次的效果,也可以实现一直执行的效果。 比如果有一个函数function a(){ ... }, 使用setInterval添加定时器的不同方...
  • 通过浏览器窗口焦点事件,清掉定时器 window.onfocus=function(){ timer=setInterval(autoRun,1000); } window.onblur=function(){ clearInterval(timer); }
  • If timeout is less than 0, then set timeout to 0. If nesting level is greater than 5, and timeout is less than 4, then set timeout to 4. 也就是说,定时器在嵌套层级超过5层时,最小延迟变为4ms,如下...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,147
精华内容 6,458
关键字:

setinterval立即执行