首页 > 软件开发 > JQUERY >

JS原生计时器setInterval正确的使用方法

来源:互联网 2023-03-16 23:54:24 版权归原作者所有,如有侵权,请联系我们

setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。setInterval动作的语法格式如下:setInterval(function,interval[,arg1,arg2,......argn])rGh办公区 - 实用经验教程分享!

下面我们来写一个setInterval的最简单用法rGh办公区 - 实用经验教程分享!

工具/原料

  • jquery.min.js
  • 任意前端编辑器
  • chrome浏览器开发者工具

方法/步骤

  • 1

    setInterval的第一个参数是一个函数,这里很多时候为了简便会直接放一个匿名函数(匿名函数没有函数名),图中代码外部的函数,和setInterval中的函数都是匿名函数,这里不做匿名函数的详细说明了,有兴趣的可以去看一下匿名函数的介绍。rGh办公区 - 实用经验教程分享!

    示例中的代码是每1000毫秒(每秒)在控制台输出i 1.rGh办公区 - 实用经验教程分享!

    JS原生计时器setInterval正确的使用方法rGh办公区 - 实用经验教程分享!

    JS原生计时器setInterval正确的使用方法rGh办公区 - 实用经验教程分享!

  • 1相关内容未经许可获取自百度经验
  • 2

    除了使用匿名函数很多情况下我们可能需要执行一些有函数名的函数,这种情况setInterval第一个参数直接使用函数名就可以了。rGh办公区 - 实用经验教程分享!

    JS原生计时器setInterval正确的使用方法rGh办公区 - 实用经验教程分享!

  • 3

    上步使用的函数没有参数,那么如有带有参数的函数参数如何传递呢?它需要放到setInterval的第三个参数上。如下面的代码和输出(每秒输出传入的参数str加上i自加以后的值)rGh办公区 - 实用经验教程分享!

    JS原生计时器setInterval正确的使用方法rGh办公区 - 实用经验教程分享!

    JS原生计时器setInterval正确的使用方法rGh办公区 - 实用经验教程分享!

  • 4

    最后我们结合jquery来更改一下页面容器的显示和隐藏效果。rGh办公区 - 实用经验教程分享!

    通过访问图中代码页面可以看到页面中的myContent容器每隔一秒钟就会交替显示/隐藏。rGh办公区 - 实用经验教程分享!

    JS原生计时器setInterval正确的使用方法rGh办公区 - 实用经验教程分享!

    JS原生计时器setInterval正确的使用方法rGh办公区 - 实用经验教程分享!

    JS原生计时器setInterval正确的使用方法rGh办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!rGh办公区 - 实用经验教程分享!


    标签: 编程语言JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号