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. 瞬间读懂什么是互联网思维、大数据、O2O、众筹、红海

     1.什么叫大数据? 某必胜客店的电话铃响了,客服人员拿起电话. 客服:必胜客.您好,请问有什么需要我为您服务? 顾客:你好,我想要一份…… 客服:先生,烦请先把您的会员卡号告诉我. 顾客:16846 ...

  2. AWS CloudFront CDN直接全站加速折腾记The request could not be satisfied. Bad request

    ERROR The request could not be satisfied. Bad request. Generated by cloudfront (CloudFront) Request ...

  3. css知多少（3）——样式来源与层叠规则

    上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...

  4. 经验分享：10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  5. 如何停止CSS3的动画？

    前言 我们在移动端一般使用zepto框架,与其说zepto是jquery的轻量级替代版,不如说是html5替代版我们在js中会用到animate方法执行动画,这个家伙可是真资格的动画,完全是css一点 ...

  6. ae工具是一种特殊的命令

    itool继承icommand,所以itool工具的调用类似于icommand,而icommand的调用主要是oncreate和onclick方法,oncreate需要传入事件执行的的对象,oncli ...

  7. 在内网中OWA第一次访问速度慢的问题

      当网络环境为内网时,有时访问OWA站点一直卡在Office Web App 那里. 这是因为SharePoint有一个证书需要联网检索 此环境为SharePoint 2013 通过下面的三个步骤 ...

  8. spring-hellow word

          在大三的时候开了一门JAVAEE SSH框架,属于软件方向选修课程,虽然本人是搞硬件的,但是也选了这么课程,因为我在想有一天物联网也会走上大门户的,所以果断去蹭课了,时至今日,重新拾起来, ...

  9. charset的获取方法

      1.解析http请求的返回值: 2.通过解析html的meta标签里面的数据: 3.通过cpdetector(java环境下)来自动验证: ---------------------------- ...

  10. DbUtils是Apache出品一款简化JDBC开发的工具类

    DbUtils     - DbUtils是Apache出品一款简化JDBC开发的工具类     - 使用DbUtils可以让我们JDBC的开发更加简单     - DbUtils的使用:       ...