setInterval 和 setTimeout 的区别 JS学习笔记2015-6-26(第67天)

setInterval 会间隔一定时间反复执行某操作;

而setTimeout则会间隔一段时间后只执行一次;

比如:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; }
 8 img { display:none; }
 9 </style>
10 <script>
11 window.onload = function (){
12     var miaov = document.getElementById(‘miaov‘);
13
14     setInterval( function(){
15         miaov.style.display = ‘inline-block‘;
16
17         setInterval(function(){
18             miaov.style.display = ‘none‘;
19         }, 3000);
20
21     },  2000);
22 };
23 </script>
24 </head>
25
26 <body>
27
28 <img id="miaov" src="img/miaov.jpg" />
29
30 </body>
31 </html>

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; }
 8 img { display:none; }
 9 </style>
10 <script>
11 window.onload = function (){
12     var miaov = document.getElementById(‘miaov‘);
13
14     setTimeout( function(){
15         miaov.style.display = ‘inline-block‘;
16
17         setTimeout(function(){
18             miaov.style.display = ‘none‘;
19         }, 3000);
20
21     },  2000);
22 };
23 </script>
24 </head>
25
26 <body>
27
28 <img id="miaov" src="img/miaov.jpg" />
29
30 </body>
31 </html>

setInterval 的这个效果是间隔2秒显示,然后间隔3秒隐藏,如此反复执行下去,效果就是广告图一会儿出现,一会儿隐藏,一直反复下去;

setTimeout 则是间隔2秒后显示,间隔3秒后隐藏,然后就停止了,只执行一次,效果就是显示一下广告图,然后自动关闭,之后就不会再出现了。

一般情况下,需要清除相应的定时器的话,就用相对应的clear,比如: clearInterval(); 和 clearTimeout();

时间: 2024-07-31 09:28:12

setInterval 和 setTimeout 的区别 JS学习笔记2015-6-26(第67天)的相关文章

node.js 学习笔记(1)/9.26

node.js核心模块: 1.nodejs全局变量是global,不是window 2.process 进程对象 3.console.log() 控制台输出 内置模块 1.util //功能不详,貌似是继承Sub,Base这两个类的 (.eg)1 util.inherits(Sub, Base); 2.events //功能不详 3.fs //file stream? (.eg) 1 var fs = require("fs"); 2 fs.readFile("file.tx

JS学习笔记-OO疑问之对象创建

问一.引入工厂,解决重复代码 前面已经提到,JS中创建对象的方法,不难发现,基本的创建方法中,创建一个对象还算简单,如果创建多个类似的对象的话就会产生大量重复的代码. 解决:工厂模式方法(添加一个专门创建对象的方法,传入参数避免重复) function createObject(name,age){ var obj =new Object(); //创建对象 obj.name = name; obj.age = age; obj.run = function(){ return this.nam

js学习笔记知识点

AJAX用法安全限制JSONPCORS面向对象编程创建对象构造函数原型继承class继承 AJAX 用法 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象: 'use strict'; function success(text) { var textarea = document.getE

第46天:setInterval与setTimeout的区别

js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别 说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧! 1.setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Node.js学习笔记(3) - 简单的curd

这个算是不算完结的完结吧,前段时间也是看了好久的Node相关的东西,总想着去整理一下,可是当时也没有时间: 现在看来在整理的话,就有些混乱,自己也懒了,就没在整理,只是简单的记录一下 一.demo的简单介绍 这次demo,只涉及到简单的curd操作,用到的数据库是mongo,所以要安装mongo数据库,数据库连接驱动是mongoose: 当然关于mongo的驱动有很多,比如mongous mongoskin等:(详见http://cnodejs.org/topic/4f4ca8e0940ce2e