JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作。

但setInterval()指每隔指定时间执行某操作，会循环不断地执行该操作；setTimeout()只延时指定时间后执行该操作，且只执行一次。

setTimeout()在某种情况下也能实现setInterval()的效果，比较经典的例子就是在在函数内部调用自己。向下面这样：

function example(){

　　...

　　setTimeout("example()", 1000);

}

下面给一个走马灯的例子：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>走马灯</title>

<script>

var i = -100;

function setColor()

{

    var color = new Array("red","blue","green","black","turquoise","coral","orange","lime","violet");

    var i = Math.round(Math.random()*8);

    document.getElementById("text").style.color = color[i];

}

function setScroll()

{

    var text = document.getElementById("text");

    text.style.marginLeft = i + "px";

    i = i + 10;

    if(i > 200){i = -100;}

    setTimeout("setScroll()",500);

}

function changeColor()

{

    setInterval("setColor()",500);

}

function func()

{

    changeColor();

    setScroll();

}

</script>

</head>

<body onLoad="func()">

<div style="width:200px; overflow:hidden; background-color:#CCC;"><div id="text" style="width:100px;">显示随机颜色</div></div>

</body>

</html>

setTimeout()与setInterval()——走马灯效果的更多相关文章

  1. Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval

    定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...

  2. 使用setTimeout模拟setInterval效果

    由于现在部分浏览器基于对系统性能的优化,在使用setInterval的时候,在页面没有获得关注的状态,浏览器可以会自动将setInterval终端,等到该页面重新获得关注时再开启.这样就会使得一些基于 ...

  3. 使用setTimeout 来实现setInterval的效果

    直接上代码,实现的核心就是在延时的情况下递归的调用自己, x=0 y=-1 function countMin( ) { y=y+1 document.displayMin.displayBox.va ...

  4. vue 实现走马灯效果

    Part.1  问题 在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果 Part.2  实现 我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 ...

  5. 浅谈JS之setTimeout与setInterval

    概念 setTimeout与clearTimeout,以及setInterval与clearInterval均属于Window对象方法. 方法 描述 setTimeout 在指定的毫秒数后调用函数或计 ...

  6. 前端开发：setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  7. setTimeout和setInterval从入门到精通

    我们在日常web前端开发中,经常需要用到定时器方法. 前端中的定时器方法是浏览器提供的,并不是ECMAScript规范中的.是window对象的方法. 浏览器中的定时器有两种, 一种是每间隔一定时间执 ...

  8. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...

  9. setTimeout，setInterval原理

    function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...

随机推荐

  1. CI框架源码阅读笔记8 控制器Controller.php

    最近时间有些紧,源码阅读系列更新有些慢.鉴于Controller中代码比较少,本次Blog先更新该文件的源码分析. 在经过路由分发之后,实际的应用Controller接管用户的所有请求,并负责与用户数 ...

  2. Java在方法作用域内创建的内部类

    在方法作用域内创建的内部类,用来实现一个接口 /** * Created by xfyou on 2016/11/3. * Java内部类演示 */ public class Parcel3 { pu ...

  3. webapi的返回类型，webapi返回图片

    1.0 首先是返回常用的系统类型,当然这些返回方式不常用到.如:int,string,list,array等.这些类型直接返回即可. public List<string> Get() { ...

  4. ASP.NET根据URL生成网页缩略图示例程序(C#语言)

    工作中可能马上要用到根据URL生成网页缩略图功能,提前做好准备. 在网上找了份源码,但是有错误:当前线程不在单线程单元中,因此无法实例化 ActiveX 控件“8856f961-340a-11d0-a ...

  5. 玩转Docker之常用命令篇（三）

    首先我们来解决一个小问题,使用docker每次都要用sudo,为了让非root用户使用docker,可将当前用户添加到docker用户组: sudo groupadd docker sudo gpas ...

  6. 前端上传组件Plupload使用指南

    我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SW ...

  7. Ext.store.load callback

    var paramsReceivable = {};                paramsReceivable.querytext = Ext.getCmp('hiddquerytext').g ...

  8. go语言 新手学习笔记 go基础教程

    目前这方面的资料相对较少,自己手动整理汇集. 第一章:安装 第一节:下载go语言 第二节:windows 安装 go语言 第三节: 第二章:基本语法 第一节:类型 .

  9. 定制Eclipse IDE之功能篇（一）

    上文回顾:定制Eclipse IDE之界面篇   这一篇文章将记录一些Eclipse插件拓展(extension),简单讲述常用拓展的用法,但可能不会那么详细. 我的主要插件的拓展如下:   一.or ...

  10. 见见面、聊聊天 - 5月22日晚7点Meetup，三里屯绿树旁酒吧，畅谈云技术和应用

    总是邮件.QQ什么的线上聊,让我们见面吧,不怕见光死,呵呵.   我和同事会先抛砖引玉,给大家介绍一下Autodesk几款最新的云技术和解决方案,然后大家就可畅所欲言,自由交流.来自五湖四海的人,为了 ...