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>& ...
随机推荐
- hdu4992 Primitive Roots（所有原根）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4992 题意:给出n,输出n的所有原根. 思路:求出n的一个原根x,那么对于所以的i,i<phi( ...
- Java中使用BASE64加密&解密
package com.bao.tools.encryption; import java.io.IOException; import org.junit.Test; import sun.misc ...
- Cheatsheet: 2015 01.01~ 01.31
JAVA JVM Architecture Improving Lock Performance in Java 10 Best Java Tools That Every Java Programm ...
- [HDOJ5773]The All-purpose Zero（贪心,DP）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5773 题意:给n个数,其中0可以用任何数字代替,问如何替换0使整个数列中的LIS最长. 0可以用任何数 ...
- Hibernate 具体代码
package com.shuyinghengxie.doudou; import static org.junit.Assert.*; import java.util.Date; import j ...
- python_way.day7 模块（configparser，xml，shutil，subprocess）、面向对象（上）（创建类，类的构成，函数式编程与面向对象编程的选择，类的继承）
python_way.day7 1.模块 configparser,xml,shutil,subprocess 1.模块 a.configparser 用于处理特定格式的文件,其本职上使用open ...
- XPah学习
资料1: 来源:http://www.cnblogs.com/ChengDong/archive/2012/06/28/2567744.html 示例Xml: <?xml version=&qu ...
- Codeforces Round #279 (Div. 2) E. Restoring Increasing Sequence 二分
E. Restoring Increasing Sequence time limit per test 1 second memory limit per test 256 megabytes in ...
- Zookeeper相关知识
一.Zookeeper是什么? Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务. ...
- 强大！基于拖放布局的 Twitter Bootstrap 网站生成器
强大!基于拖放布局的 Twitter Bootstrap 网站生成器 网址如下 http://www.layoutit.com/build http://demo.sc.chinaz.com/File ...