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>& ...
随机推荐
- MVC系列之一 入门概述
一 概述 MVC作为一种当前比较好的开发web的框架,不得不提一下了,和WebForm比较来看,有了很大的进步和改进. 先进行一个简单的比较,两个都是Web开发框架,理念仍然是较快速开发. 不过MVC ...
- 启动Print Spooler服务提示:"错误1068,依存服务或无法启动"
本人windows8操作系统,从网上看到在运行中输入 sc config spooler depend= rpcss 即可,试了下果然有效.具体原因待了解.
- 一次Linux系统被攻击的分析过程
IT行业发展到现在,安全问题已经变得至关重要,从最近的“棱镜门”事件中,折射出了很多安全问题,信息安全问题已变得刻不容缓,而做为运维人员,就必须了解一些安全运维准则,同时,要保护自己所负责的业务,首先 ...
- Block很简单，就像delegate的简化版
代理设计模式对于iOS开发的人来说肯定很熟悉了,代理delegate就是委托另一个对象来帮忙完成一件事情,为什么要委托别人来做呢,这其实是MVC设计模式中的模块分工问题,例如View对象它只负责显示界 ...
- getElementsByClassName
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 教你如何使用php session
原文网址:http://www.jb51.net/article/42500.htm 学会php session可以在很多地方使用,比如做一个后台登录的功能,要让程序记住用户的session,其实 ...
- JAVA GUI设计中遇到的一个小问题
最近新学,大牛勿喷.. 写下笔记主要是记录自己常犯的错误,也方便新人解决问题学习参考. 问题:win7下设计GUI,文本框和密码框显示不出来. 我的解决方案: 1. JTextField text = ...
- bzoj 1588: [HNOI2002]营业额统计 treap
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 13902 Solved: 5225[Submit][Sta ...
- CSS笔记（一）CSS规则
CSS是层叠式样式表(Cascading Style Sheets)的缩写,定义了如何显示HTML元素. CSS规则由两个主要的部分构成:选择器 + 一条或多条声明. 每条声明由一个属性和一个值构成. ...
- hd1496---->这道题是水水的数论吗？
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1496 题意: Consider equations having the following form: ...