setInterval()的时间参数无法随参数的变化而变化
2017-04-18
写了个随机抽奖的小案例，打算随机跳动十次，每次变化的时间越来越长，也就是跳动的速度越来越慢，结果发现setInterval的时间参数并不会随着变化。
<!--案例的结构如下-->
<body>
<button id="btn">开始抽奖</button>
<ul>
<li>一等奖</li>
<li>二等奖</li>
<li>三等奖</li>
<li>四等奖</li>
<li>五等奖</li>
<li>六等奖</li>
<li>七等奖</li>
<li>八等奖</li>
<li>九等奖</li>
</ul>
<!--简单的JavaScript代码如下-->
<script>
$(function () {
var oBtn = $('#btn');
var timer = null;
var oLi = $('li');
//点击按钮开始执行定时器
oBtn.click(function () {
clearInterval(timer);
var time = 10;
var speed = 100;
timer = setInterval(function () {
time--;
speed+=30;
//console.log(speed);
var index = Math.floor(Math.random()*oLi.length);
oLi.css('background','none');
oLi.eq(index).css('background','red');
if (time==0){
clearInterval(timer);
}
},speed)
})
})
</script>
后来想想改成setTimeOut(),然后加上回调，这样时间参数speed就能够每次获取到新的数值。script的代码修改为如下：
<!--简单的JavaScript代码如下-->
<script>
$(function () {
var oBtn = $('#btn');
var timer = null;
var oLi = $('li');
//点击按钮开始执行定时器
oBtn.click(function () {
var time = 10;
var speed = 100;
timer = setTimeout(function () {
time--;
speed+=30;
console.log(speed);
var index = Math.floor(Math.random()*oLi.length);
oLi.css('background','none');
oLi.eq(index).css('background','red');
if (time){//time等于0就不再回调
timer = setTimeout(arguments.callee,speed);
}
},speed)
})
})
效果如下：
setInterval()的时间参数无法随参数的变化而变化的更多相关文章
- 使用自定义setTimeout和setInterval使之可以传递参数和对象参数
转载自http://www.jb51.net/article/17859.htm /****************************************************** // ...
- 修改 window.setTimeout，使之可以传递参数和对象参数
/* 功能:修改 window.setTimeout,使之可以传递参数和对象参数 使用方法: setTimeout(回调函数,时间,参数1,,参数n) */ var _setTimeout=setTi ...
- 基类中定义的虚函数在派生类中重新定义时，其函数原型，包括返回类型、函数名、参数个数、参数类型及参数的先后顺序，都必须与基类中的原型完全相同 but------> 可以返回派生类对象的引用或指针
您查询的关键词是:c++primer习题15.25 以下是该网页在北京时间 2016年07月15日 02:57:08 的快照: 如果打开速度慢,可以尝试快速版:如果想更新或删除快照,可以投诉快照. ...
- Java中不定项参数（可变参数）的作用和使用方式
引言: 我们在编写方法的过程中,可能会遇见一个方法有不确定参数个数的情况.一般我们会用方法重载来解决问题: //方法重载,解决参数个数不确定问题 public void method(); publi ...
- 性能测试三十六：内存溢出和JVM常见参数及JVM参数调优
堆内存溢出: 此种溢出,加内存只能缓解问题,不能根除问题,需优化代码堆内存中存在大量对象,这些对象都有被引用,当所有对象占用空间达到堆内存的最大值,就会出现内存溢出OutOfMemory:Java h ...
- .net 反射访问私有变量和私有方法 如何创建C# Closure ? C# 批量生成随机密码，必须包含数字和字母，并用加密算法加密 C#中的foreach和yield 数组为什么可以使用linq查询 C#中的 具名参数 和 可选参数 显示实现接口 异步CTP（Async CTP）为什么那样工作？ C#多线程基础，适合新手了解 C#加快Bitmap的访问速度 C#实现对图片文件的压
以下为本次实践代码: using System; using System.Collections.Generic; using System.ComponentModel; using System ...
- ORACLE 11GR2常用参数(含隐含参数)设置
ORACLE 11GR2常用参数(含隐含参数)设置如下: alter system set "_PX_use_large_pool" = true scope=spfile;alt ...
- 【查阅】mysql配置文件/参数文件重要参数笔录（my.cnf）
持续更新,积累自己对参数的理解 [1]my.cnf参数 [client]port = 3306socket = /mysql/data/3306/mysql.sockdefault-character ...
- request参数获取，参数校验，参数处理
需求: 1.post接口,需要在过滤器中进行参数校验,校验通过之后再执行方法 2.原有代码中使用x-www-form-urlencoded传参,新需求要使用json格式 3.原有代码校验过滤器使用Se ...
随机推荐
- 什么是Css Hack？ie6,7,8的hack分别是什么？
针对不同的浏览器写不同的CSS code的过程,就是CSS hack. 示例如下: 1 2 3 4 5 6 7 8 9 10 11 12 #test { width:300px; heig ...
- CoolBlog开发笔记第2课:搭建开发环境
教程目录 1.1 CoolBlog开发笔记第1课:项目分析 前言 今天是CoolBlog开发笔记的第2课,我们将要讲解的是开发环境的搭建.俗话说"工欲善其事必先利其器",Djang ...
- 插入多行数据的时候，一个insert插入多行
如:insert into t_users(a,b,c)value('1','2','3'),('3','4','5'),('6','7','8') ('1','2','3'),('3','4','5 ...
- RADIUS and IPv6[frc-3162译文]
如今项目中需要涉及到RADIUS及IPv6的使用,而网络中的资料相对较少,现对frc-3162进行中文翻译,分享出来. 由于英语水平有限,翻译不恰当的地方,还请提出,便于在下及时修改. 原文链接 这份 ...
- ExtJs2.0里Ext.form.Radio水平排列布局
ExtJs2.0好像不支持单选框组,因此用两个name相同单选框来实现单选框组 var radio1 = new Ext.form.Radio({boxLabel:'男',name:'sex',i ...
- YARN框架详解
YARN框架详解 YARN官方解释 YARN是什么 The fundamental(定义) idea of YARN is to split(分开) up the functionalities(功能 ...
- HTML5+CSS3静态页面项目-BusinessTheme的总结
因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...
- mysql生成百万级数量测试数据
今天因为项目需要,想测试一下读取百万级数量数据的速度如何,无奈数据库没有现成符合要求的数据,网上百度一番有很都不错的文章,但是需要涉及到一些存储过程和用php代码什么的,虽说可以实现,但是感觉另外再弄 ...
- Unity-奥义技能背景变黑效果
[旧博客转移 - 2016年8月29日 12:51 ] 前段时间做了一个放技能的时候,背景缓慢变黑,放完后再变回来的效果,可以很好的突出技能特效的感觉. 算是一种屏幕后期特效,这个特效说难不难,说简单 ...
- sublime使用总结
上周忙呀忙~ 周一到五在忙项目,周六日搬家 在帝都平均一年就要换一次房子,从开始找房子到成功住进去前前后后大约花了半个多月的时间 什么时候就有自己的小窝了-- 之前开发一直用的都是W ...