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>& ...
随机推荐
- ContentProvider官方教程(5)ContentResolver插入、更新、删除 示例
Inserting, Updating, and Deleting Data In the same way that you retrieve data from a provider, you a ...
- Linux的启动过程
Linux的启动过程,也就是Linux的引导流程,这部分主要是理论知识. Linux的开机启动过程 1.1第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的 ...
- winfrom增删改查
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- WWDC2016 Session笔记 - Xcode 8 Auto Layout新特性
目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedb ...
- CUBRID学习笔记23 关键字列表
先放上特殊的字符 Backtick Symbol - ` 反引号 同撇 Double Quotes - " 双引号 Square Brackets - [ 中括号 如 ...
- 使用httpclient时候，出现“Too many open files”问题
最近接触的sendHttpPostRequest的问题比较多,近期碰到了关于 "java.net.SocketException: Too many open files" 的问题 ...
- $.ajax() ,$.post(),$.get() 的用法
在编写代码的过程中,我们会用到一些的需要局部刷新,而且需要数据传递的情况,我们通常是有$.ajax() ,$.post(),$.get() 这三种方式. $.ajax()方法通过 HTTP 请求加载远 ...
- [转载] 首席工程师揭秘：LinkedIn大数据后台是如何运作的？(一）
本文作者:Jay Kreps,linkedin公司首席工程师:文章来自于他在linkedin上的分享:原文标题:The Log: What every software engineer should ...
- Python学习（12）日期和时间
目录 Python 日期和时间 时间元组 获取当前时间 获取格式化时间 格式化日历 获取某月日历 Time模块 日历模块 其他相关模块和函数 Python 日期和时间 Python 程序能用很多方式处 ...
- mysql Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
错误原因:/var/lib/mysql目录中socket文件不存在.连接mysql服务器有两种方式:tcp连接,通过socket文件连接.通过socket文件,启动mysql服务,mysql服务会自动 ...