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()的时间参数无法随参数的变化而变化的更多相关文章

  1. 使用自定义setTimeout和setInterval使之可以传递参数和对象参数

    转载自http://www.jb51.net/article/17859.htm /****************************************************** //  ...

  2. 修改 window.setTimeout，使之可以传递参数和对象参数

    /* 功能:修改 window.setTimeout,使之可以传递参数和对象参数 使用方法: setTimeout(回调函数,时间,参数1,,参数n) */ var _setTimeout=setTi ...

  3. 基类中定义的虚函数在派生类中重新定义时，其函数原型，包括返回类型、函数名、参数个数、参数类型及参数的先后顺序，都必须与基类中的原型完全相同 but------> 可以返回派生类对象的引用或指针

      您查询的关键词是:c++primer习题15.25 以下是该网页在北京时间 2016年07月15日 02:57:08 的快照: 如果打开速度慢,可以尝试快速版:如果想更新或删除快照,可以投诉快照. ...

  4. Java中不定项参数（可变参数）的作用和使用方式

    引言: 我们在编写方法的过程中,可能会遇见一个方法有不确定参数个数的情况.一般我们会用方法重载来解决问题: //方法重载,解决参数个数不确定问题 public void method(); publi ...

  5. 性能测试三十六：内存溢出和JVM常见参数及JVM参数调优

    堆内存溢出: 此种溢出,加内存只能缓解问题,不能根除问题,需优化代码堆内存中存在大量对象,这些对象都有被引用,当所有对象占用空间达到堆内存的最大值,就会出现内存溢出OutOfMemory:Java h ...

  6. .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 ...

  7. ORACLE 11GR2常用参数(含隐含参数)设置

    ORACLE 11GR2常用参数(含隐含参数)设置如下: alter system set "_PX_use_large_pool" = true scope=spfile;alt ...

  8. 【查阅】mysql配置文件/参数文件重要参数笔录（my.cnf）

    持续更新,积累自己对参数的理解 [1]my.cnf参数 [client]port = 3306socket = /mysql/data/3306/mysql.sockdefault-character ...

  9. request参数获取，参数校验，参数处理

    需求: 1.post接口,需要在过滤器中进行参数校验,校验通过之后再执行方法 2.原有代码中使用x-www-form-urlencoded传参,新需求要使用json格式 3.原有代码校验过滤器使用Se ...

随机推荐

  1. IT学习网站

    网站 网站定位 http://www.51cto.com/ 中国领先的IT技术网站. http://www.iteye.com/ 内容齐全,功能丰富的中文IT技术门户和社区网站. http://www ...

  2. wildfly10报错2:ID注释有错

    13:55:56,612 INFO [org.jboss.modules] (main) JBoss Modules version 1.5.1.Final 13:55:56,891 INFO [or ...

  3. MySQL，Oracle，PostgreSQL通过web方式管理维护， 提高开发及运维效率

    在开发及项目运维中,对数据库的操作大家目前都是使用客户端工具进行操作,例如MySQL的客户端工具navicat,Oracle的客户端工具 PL/SQL Developer, MSSQL的客户端工具查询 ...

  4. MHD simulation with python

    这里为MHD(磁流体力学)模拟做一些准备,可能现在学习物理的人从某种程度上也得变成程序猿吧.MHD模拟面临的问题是求解一个三维的偏微分方程组,其中涉及的流体元格点非常多.所以希望先从简单的一维模型出发 ...

  5. oracle学习笔记(1)-三级模式SCHEMA

    oracle三级模式及二级映像 模式(schema)是数据库的一个名词,大部分的数据库在结构上都有三级模式的特征,了解下基本的概念,有助于后续深入的学习. 用老罗坚果pro发布会的话说就是,不罗嗦,先 ...

  6. zend framework 1 安装教程

    网上的安装教程总是一笔带过,本人结合已经爬过的坑,为大家展示最简单的安装方式: 博主环境如下: 操作系统:win7 64bit 开发环境:lnmp(phpstudy) 注意: zftest:官方下载的 ...

  7. PHP运行出现Notice : Use of undefined constant

    这些是 PHP 的提示而非报错,PHP 本身不需要事先声明变量即可直接使用,但是对未声明变量会有提示.一般作为正式的网站会把提示关掉的,甚至连错误信息也被关掉 关闭 PHP 提示的方法 搜索php.i ...

  8. 【Android Developers Training】 48. 轻松拍摄照片

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  9. Java多线程（一） —— 线程的状态详解

    一.多线程概述  1. 进程 是一个正在执行的程序.是程序在计算机上的一次运行活动. 每一个进程执行都有一个执行顺序.该顺序是一个执行路径,或者叫一个控制单元. 系统以进程为基本单位进行系统资源的调度 ...

  10. day4作业小代码练习

    登录模块: 我们无论上那个网站,经常遇到这样的情况,让我们登录这个网站,流程图如下: 思路: 1.当我们登录网站的时候,我们首先会输入用户名,这个时候,有些网站会提醒我们用户名是否存在,如果我们输入的 ...