有趣的setTimeout

【有趣的setTimeout】的更多相关文章

你不知道的Javascript：有趣的setTimeout

你不知道的Javascript:有趣的setTimeout 有时候,小小的细节往往隐藏着大大的智慧今天在回顾JavaScript进阶用法的时候,发现一个有趣的问题,话不多说,先上代码: for(var j=0;j<10;j++){ setTimeout(function(){console.log(i)},5000)} 看到这三行代码,也许你会不耐烦道:又要讲闭包?要吐了好么?别急,让我们先来思考一下,这段代码在浏览器中的执行结果是什么? 甲:顺序打印0到9? 乙:这题我见过,打印十个10! 哪…

今天在回顾JavaScript进阶用法的时候,发现一个有趣的问题,话不多说,先上代码: for(var j=0;j<10;j++){ setTimeout(function(){console.log(j)},5000) } 看到这三行代码,也许你会不耐烦道:又要讲闭包?要吐了好么?别急,让我们先来思考一下,这段代码在浏览器中的执行结果是什么? 执行结果显示,浏览器打印出了十个10 家都知道,JavaScript在ES6出现以前,是没有块状作用域的,这就意味着, 在for循环中用var定义的变量…

每个JavaScript工程师都应懂的33个概念

摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念作者:stephentian Fundebug经授权转载,版权归原作者所有. 简介这个项目是为了帮助开发者掌握 JavaScript 概念而创立的.它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南. 本篇文章是参照 @leonardomso 创立,英文版项目地址在这里. 由于原版资源都…

每个 JavaScript 工程师都应懂的33个概念

简介这个项目是为了帮助开发者掌握 JavaScript 概念而创立的.它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南. 本篇文章是参照 @leonardomso 创立,英文版项目地址在这里. 由于原版资源都要FQ,所以本人创立一个中文版,附上关于这些概念在国内的一些文章和视频. 若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除. 若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除. 文章的排序优化,前面的文章是介绍概念,后面的文章是深入解…

【小贴士】关于transitionEnd/animate的一个有趣故事

前言在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能当时主要使用transform与animation实现功能,并且用了一个settimeout执行回调,然后此事便不了了之了但是出来混总是要还的,这不,最近相似的东西又提了出来,我们当然可以将原来的那套东西拿来用,但是看着那个settimeout总是不是滋味,因为这样捕捉回调的效果以及可能引起的BUG大家都懂,于是就…

js中setTimeout()时间参数设置为0的探讨

起因源于一道前端笔试题: var fuc = [1,2,3]; for(var i in fuc){ setTimeout(function(){console.log(fuc[i])},0); console.log(fuc[i]); } 问:控制台会如何打印? chrome打印结果如下: 虽然setTimeout函数在每次循环的开始就调用了,但是却被放到循环结束才执行,循环结束,i=3,接连打印了3次3. 这里涉及到javascript单线程执行的问题:javascript在浏览器中是单线程…

setTimeout 第三个参数改变setTimeout的作用对象控制下拉框的关闭

setTimeout第三个参数,可以作为setTimeout延时执行函数的传入参数使用,利用这个设定,我们可以将要延时改变状态的对象传入,变相改变setTimeout的作用对象:这里setTimeout的第三个参数主要得到了除IE外的系列浏览器的支持一个有趣的例子 var arr = [1,9,2,8,3,7,4,6,4,5]; for(var i = 0, len = arr.length; i < len; i++){ setTimeout(function(x){ console.log…

浅谈setTimeout函数和setInterval函数

前几天学了js,看到了两个非常有趣的函数,他们分别是setTimeout函数和setInterval函数,这两个函数能使网页呈现非常一些网页中比较常见的效果,比如说图片轮播,等一些非常好玩的效果.下面就来一起来了解这两个函数吧! 一setTimeout函数和setInterval函数的语法以及应用 1.setTimeout函数定义和用法:setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法:setTimeout(code,millisec); 参数: code (必…

有趣的win8进度条

有趣的win8进度条刚才在安装visual studio 12,发现它的安装界面都是win8风格的,而且安装的时候有个进度条,看着挺不错,就用 jquery 实现了一下,的确挺有趣: 点击停止效果代码: <!DOCTYPE html> <html> <head> <style type="text/css"> * {margin:0;padding:0} .progress {width:500px;height:…

setTimeout与setInterval参数之String

今天无意中给某网友解答了一些setTimeout的问题,发现一个有趣的东西. 以前我总认为setTimeout的第一个参数只能function,后面发现string也能执行.那问题来了,String做参数,使用的是哪个域? function trace(){ console.log("out"); } function test(){ function trace(){ console.log("in"); } setInterval("trace()&q…

高级定时器-setTimeout()、setInterval()、链式setTimeout()

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能.执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript 进程.在页面下载完后的代码运行.事件处理程序.Ajax 回调函数都必须使用同样的线程来执行.实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级.有关于js的单线程请点击:浏览器的多进程可以把 JavaScript 想象成在时间线上运行的.当页面载入时,首先执行是任何包含在<scrip…

有趣的css—简单的下雨效果2.0版

简单的下雨效果2.0版前言笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作GIF图片的工具最多只支持制作33FPS的GIF图,所以看起来可能有一点点卡顿,实际的效果比图片还是要好一些的,点击这里可以在线查看2.0版的效果. 思路制作背景首先给body中添加一个id为rain的div,并通过背景颜色线性渐变得到天空-地平线-海面的效果. <!DOCTYPE html>…

谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣…

谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣…

几个有趣的WEB设备API（二）

浏览器和设备之间还有很多有趣的接口, 1.屏幕朝向接口浏览器有两种方法来监听屏幕朝向,看是横屏还是竖屏. (1)使用css媒体查询的方法 /* 竖屏 */ @media screen and (orientation: portrait) { div{ width: 100%; } } /* 横屏 */ @media screen and (orientation: landscape) { div{ height: 100%; } (2)利用js调用屏幕朝向接口 screen.addEven…

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型所有题目汇总在我的 Github . 3.层叠顺序(stacking level)与堆…

setTimeout 的黑魔法

setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实.有着一个很不平凡的名字--定时器.让年少的我天真的以为自己可以操纵未来.却不知朴实之中隐含着惊天大密.我还记得我第一次用这个函数的时候,我天真的以为它就是js实现多线程的工具.当时用它实现了一个坦克大战的小游戏,玩儿不亦乐乎.可是随着在前端这条路上越走越远,对它理解开始产生了变化.它似乎开始蒙上了面纱,时常有一些奇怪的表现让我捉摸不透.终于,我的耐心耗尽,下定决心,要撕开它的面具,一探究竟. 要说setTimeou…

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 所有题目汇总在我的 Github . 题目1.下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签是一个 div: <div></div> 定义如下通用CSS: div{ p…

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法所有题目汇总在我的 Github . 2.类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 div: <div><…

谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少所有题目汇总在我的 G…

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣的CSS题…

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣…

谈谈一些有趣的CSS题目（七）-- 消失的边界线问题

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣…

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣…

谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣…

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣…

几个有趣的WEB设备API 前端提高B格必备（一）——电池状态&震动api

受到同事启发,突然发现了几个有趣又实用的web api,没想到前端还有这么多有趣的东西可以玩~~简直过分. 1.电池状态API navigator.getBattery():这个api返回的是一个promise对象,会给出一个BatteryManager对象,对象中包含了:设备是否在充电,电量,以及还需充电时长和剩余时长等信息. chrome浏览器.安卓的webview.iphone都可以使用.ie,safari不管是pc还是移动端都不支持. 调用方法如下: navigator.getBatte…

[C#版本]有趣啊！各种编程语言实现 2 + 2 = 5

首页新闻里面那个 [新闻头条]有趣啊!各种编程语言实现 2 + 2 = 5 其他的就不评论的,但是其中C#版的真是逗比啊...评论中各种吐槽有木有... static void Main (string[] args) { ; ; == ) ; { ++x; } Console.WriteLine (x + y); } 所以我闲来无聊 ~~ 也来实现一个.... static void Main(string[] args) { using (var p = new CSharpCodePro…

你所不知道的setTimeout

JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单,实时上真的如此么?这里记载下,一路对其使用姿势变迁的历程. 如觉此处样式排版不尽人意,可移步首链晚晴幽草轩~你所不知道的setTimeout 1, setTimeout()基础 setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取…