setInterval小问题
先看下面代码：
for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i)
}, 1000);
}
运行效果是
输出了三次3，而要想输出1,2,3,可改进代码为：
for (var i=0;i<3;i++){
(function (i) {
setTimeout(function () {
console.log(i);
},1000);
})(i);
}
效果：
简要说一下鄙人拙见：
第一个代码出现三次，3，的原因是，for循环时间远小于1000毫秒，所以for循环完了，计时器才运行的，获取的就是三次3.
第二个代码：添了个闭包函数，当i每次累加的时候先执行下计时器，当等于一的时候执行计时器输出1，同理出现2,3
还有就是不要在计时器嵌套for循环
所以还有一下代码：
var i = 0;
var id = setInterval(function () {
i++;
console.log(i);
if (i >= 12) {
clearInterval(id);
}
}, 100);
一个简单例子，个人感觉挺实用的。又不用嵌套for循环。。
补充2016-09-30 11:07:19
通过jQuery each()方法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each</title>
<script src="../base/jquery-3.1.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
} .blueBg {
background: blue;
} .whiteBg {
background: white;
}
</style>
</head>
<body>
<ul>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</body>
<script>
$(function () {
var timer = null;
$("ul li").each(function (i) {
$(this).hover(function () {
var curLi = $(this);
timer = setTimeout(function () {
curLi.removeClass("whiteBg").addClass("blueBg");
console.log(i);
});
}, function () {
clearTimeout(timer);
$(this).removeClass("blueBg").addClass("whiteBg");
})
})
})
</script>
</html>
setInterval小问题的更多相关文章
- web开发资源导航
实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...
- JavaScript 相关的工具代码
博客地址:https://ainyi.com/49 记录一些数据处理需要的方法工具代码 持续更新中... 时间戳转与日期格式相互转换 时间戳转换成日期格式 function timestampToTi ...
- 小程序坑 redirectTo 计时器 setInterval clearInterval
var time = 20: var timer = setInterval(function () { time = time - 1; that.setData({ CountDown: time ...
- 每日技术总结：setInterval,setTimeout,文本溢出,小程序，wepy
前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...
- 小程序实现倒计时：解决ios倒计时失效（setInterval失效）
在使用之前需要先在page页引入wxTimer.js文件(这里我将文件放在/utils) let timer = require('../../utils/wxTimer.js'); 然后就可以使用啦 ...
- 用javascript编写的小游戏（getElementById ， setInterval ， clearInterval ， window.onload ， innerText 和页面跳转， 标签的使用）
(1)图片轮转 <script type="text/javascript" > ; setInterval(function(){ var dom=document. ...
- setInterval（）与clearInterval（）的一个有趣小现象
今天在使用setInterval()时,发现了一个有意思的事情 代码如下: var box=document.getElementById("box");//获取id为“box”的 ...
- javascript平时小例子④（setInterval使用2）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- javascript平时小例子③（setInterval使用1）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
随机推荐
- profile、bashrc、bash_profile之间的区别和联系
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. 英文描述为: # /etc/pr ...
- Java动态代理 cglib
代理模式:为某些对象提供代理以实现对这个对象的访问. 对一个对象进行访问控制的原因是为了只有在我们确实需要这个对象时才对它进行创建和初始化. 一般包括以下组件: 被代理者接口:提供被代理者的访问途径. ...
- Centos下防火墙的设置
service iptables status可以查看到iptables服务的当前状态.但是即使服务运行了,防火墙也不一定起作用,你还得看防火墙规则的设置 iptables -L在此说一下关于启动和关 ...
- Android 程序打包和安装过程
APP程序打包与安装的流程: APP的安装过程:
- How To PLAY_SOUND in Oracle Forms
Play_sound is used to play audio files in Oracle Forms, Play_Sound plays the sound object in the spe ...
- [python]实现单机版一行wordcount
用过spark,对wordcount这个演示程序记忆犹新,于是想试着实现一个简单的wordcount.又因为在学习函数式编程,希望可以把数据看成一个整体,在现有的函数上进行操作.于是就有了这一行代码. ...
- CUBRID学习笔记 15 Lobs类型数据
BLOB: Binary large object CLOB: Character large object 一个二进制 一个字符类型 二进制的读取 CUBRIDCommand cmd = new C ...
- Codeforces Round #288 (Div. 2) C. Anya and Ghosts 模拟
C. Anya and Ghosts time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- Python基础学习笔记（四）语句
参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-chinese-encoding.html 3. http://w ...
- Github上不错的Android开源代码（一）
总有一些朋友很热心的整理一些好的资料,在收集之后,可以用作阅读.学习和实践.小伙伴们,总有一天,你也能写出 Niubility 的 Android App :-) 为了防止以上链接失效,以及部分内容丢 ...