• javascript基础--setTimeout与setInterval区别

    一、javascript中settimeout和setinterval的区别是 settimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束。如果运行的代码中再次运行同样的settimeout命令,则可循环运行。 setinterval是循环运行的,即每到设定时间间隔就触发指定代码。这是真正的定时器。setinterval使用简单,而settimeout则比较灵活,可以随时退出循环,而且可以设置为按不固定的时间间隔来运行,比如第一次1秒,第二次2秒,第三次3秒…… 1,settimeout详解 var t = settimeout(“javascript 语句”, 时间参数) 注:时间参数单位为毫秒 示例:var t=settimeout(“alert(’3 seconds!’)”, 3000) 如果js语句带变量,则必须用+号将变量连接起来,如: var t = settimeout(”document.getelementbyid(“+menuid+”).style.display=’none’”, 3000) cleartimeout详解 语法:cleartimeout(settimeout的变量名) 示例:cleartimeout(t) //其中t为前面设置的settimeout的变量 使用cleartimeout可以随时停止计时。 2,setinterval定义和用法 setinterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setinterval() 方法会不停地调用函数,直到 clearinterval() 被调用或窗口被关闭。由 setinterval() 返回的 id 值可用作 clearinterval() 方法的参数。 语法 setinterval(code,millisec[,”lang”]) 参数 描述 code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。 返回值...


  • javascript基础--监听与观察者模式

    监听与观察者模式 这里主要看下监听者模式和观察者模式的两个例子 1、请看监听模式的代码示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47...


  • javascript基础--突变事件与观察者事件

    一、问题背景 1.1、发现问题 首先有这样一个问题,就是页面title后面莫名其妙hash值 这是一个带有flash的播放页面,开始,觉得这个问题我十分钟能搞定发到外网,测试同学稍等。十分钟过后我哭了~ 二、问题描述 问题重现在IE环境下,如果页面有flash内容embed嵌入,同时页面URL中带有hash,在flash加载后会改变document.title,而且后面js每次和flash交互都会改变document.title,就是把hash内容加到title后面(http://code.google.com/p/swfobject/issues/detail?id=293)。这个被定义为IE的bug,怎么解决? http://stackoverflow.com/questions/4562423/ie-title-changes-to-afterhash-if-the-page-has-a-url-with-and-has-flash-s 然后有了这个解决方案。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var originalTitle = document.title.split("#")[0]; document.attachEvent && document.attachEvent('onpropertychange', function (evt) { if(evt.propertyName === 'title' && document.title !== originalTitle) { setTimeout(function () { document.title = originalTitle; }, 1); }...


  • 从webWorker到serviceWorker

    从webWorker到serviceWorker http://www.w3.org/TR/2014/WD-service-workers-20140508/#introduction 下面将从webWorker、serviceWorker和为什么使用serviceWorker三个方面进行讨论 一、Web worker 要了解serviceworker,先的认识下webworker,也可以了解一下二者的共同点,并予以区分。 Web Workers 是 现代浏览器 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行。JavaScript语言执行采用的是单线程模型,也就是说,所有任务排成一个队列,一次只能做一件事。但是有了webworker后就不一样了。 (1) 兼容性 支持的浏览器包括IE10、Firefox (从3.6版本开始)、Safari (从4.0版本开始)、Chrome 和 Opera 11+,但是手机浏览器还不支持。 (2) 基础API 构造一个webworker:new Worker(path) ,返回一个Worker对象。 返回的对象 onerror:用于worker出错处理 onmessage:用户主线程和worker线程传递数据,可以使字符串数字或对象,但是safari浏览器不支持对象,需要用stringify和parse转化。当然和可以使用addeventListener(“message”,function(){}); 煮个栗子:(例子代码见附件) 输出 如何结束worker: 主页面worker.terminate();或worker自销毁self.close();或者关闭页面 sharedworker: 除了webWorker,还有另一类sharedworker支持多个浏览器窗口共享同一个worker,单个页面关闭,worker并不结束,需关闭浏览器。但这里不做深入讨论 importScripts: worker内部引用文件的方法,可以将worker分成不同的多个文件,然后使用importScripts加载,并可以实现文件的动态加载。就像html中使用script标签引入js一样。 global worker上下文: 前面提到在worker中不能使用window对象和docuemnt对象,是因为一个webworker拥有一个独立的运行环境Workerglobalscope并和浏览器的环境独立,Workerglobalscope环境包括: JavaScript的全局对象:JSON、Date()、Array *self自身引用 *location对象,但是其属性都是只读的,改了也影响不到调用者 *navigator对象,但修改了部分属性 *setTimeout()、setInterval()及其对应清除方法 *addEventListener()、removeEventListener() http://dev.w3.org/html5/workers/#dedicatedworkerglobalscope (3) 局限性 1.同源限制。webworker不能跨域加载JS 2.DOM限制。worker内代码不能访问dom,原因是worker有自己独立的global...


  • javascript基础--深入理解proto与__proto__

    这里重新讲述prototype原型这个概念,今天我们深度的分析下prototype与__proto__。 例子 1 2 3 4 5 6 var Person = function(name) { this.name = name ; }; var p = new Person("Ben"); console.log(p.name); 代码简单的 你不用说明了,如果现在让大家根据上面的代码画一张包含Function与Object的内存图,大家肯定回想什么叫包含Function与Object,上面的代码和它们有几毛钱的关系。好了,下面我先按要求把图画出来,大家参考下: 解析下: 1、任何一个由构造器产生的对象都有__proto__属性,且此属性指向该构造器的prototype。 2、所有构造器/函数的__proto__都指向Function的prototype 拿第2条对比第1条,貌似我们发现了什么,没错函数的构造器就是Function,看下面的代码: 1 2 3 4 5 6 7 8 9 10 11 12 //函数表达式 var Person = function(name) { this.name =...


  • 前端基础--知识体系

    先给个大家认同的知识体系图 一、HTML 标签的分类 标签表示一个元素 按性质划分: Block-Level和Inline-Level 按语义划分: Headings: h1, h2, h3, h4, h5, h6 Paragraphs: p Text Formatting: em, strong, sub, del, ins, small Lists: ul, li, ol, dl, dt, dd Tables: table, thead, tbody, tr, th, td Forms and Input: form, input, select, textarea Others: div, span, a, img,...


  • sublime插件安装说明

    系统&环境要求 sublime3 win7 & OSX10 node ruby sublime3 脚本安装配置 按下 ctrl+` 复制粘贴以下代码执行,直到弹出【安装成功】弹窗 1 2 pl="SublimeLinter,SublimeLinter-jscs,SublimeLinter-jshint,SublimeLinter-csslint,SublimeLinter-contrib-scss-lint,Emmet,EJS,SCSS,CSScomb,JsFormat,DocBlockr,SnippetMaker,BracketHighlighter,SassBeautify,SideBarEnhancements,CSS Snippets,JavaScript & NodeJS Snippets,TortoiseSVN";import webbrowser,urllib.request,os;jcp=os.path.join(sublime.packages_path(),"User",".jshintrc");scssp=os.path.join(sublime.packages_path(),"User",".scss-lint.yml");jscsp=os.path.join(sublime.packages_path(),"User",".jscsrc");sm={"Preferences":{"translate_tabs_to_spaces":True,"word_wrap":True,"wrap_width":120,"tab_size":4,"default_line_ending":"unix"},"SublimeLinter":{"user":{"gutter_theme":"Packages/SublimeLinter/gutter-themes/Blueberry/round/Blueberry - round.gutter-theme","lint_mode":"manual","linters":{"csslint":{"@disable":False,"args":[],"errors":"","excludes":[],"ignore":"box-model,adjoining-classes,box-sizing,compatible-vendor-prefixes,gradients,text-indent,fallback-colors,star-property-hack,underscore-property-hack,bulletproof-font-face,font-faces,import,regex-selectors,universal-selector,unqualified-attributes,overqualified-elements,duplicate-background-images,floats,font-sizes,ids,important,outline-none,qualified-headings,unique-headings","warnings":""},"jscs":{"@disable":False,"args":["--config",jscsp],"excludes":[]},"scss":{"@disable":False,"args":["--config",scssp],"exclude-linter":"","include-linter":"","excludes":[]},"jshint":{"@disable":False,"args":["--config",jcp],"excludes":[]}},"mark_style":"outline"}},"JsFormat":{"indent_size":4,"indent_char":" ","eol":"\n","indent_level":0,"indent_with_tabs":False,"preserve_newlines":True,"max_preserve_newlines":10,"jslint_happy":False,"space_after_anon_function":False,"brace_style":"collapse","keep_array_indentation":False,"keep_function_indentation":False,"space_before_conditional":True,"break_chained_methods":False,"eval_code":False,"unescape_strings":False,"wrap_line_length":0,"wrap_attributes":"auto","wrap_attributes_indent_size":4,"end_with_newline":True},"CSScomb":{"config":{"remove-empty-rulesets":True,"always-semicolon":True,"color-case":"lower","block-indent":" ","color-shorthand":True,"element-case":"lower","eof-newline":True,"leading-zero":False,"quotes":"double","sort-order-fallback":"abc","space-before-colon":"","space-after-colon":" ","space-before-combinator":" ","space-after-combinator":" ","space-between-declarations":"\n","space-before-opening-brace":" ","space-after-opening-brace":"\n","space-after-selector-delimiter":"\n","space-before-selector-delimiter":"","space-before-closing-brace":"\n","strip-spaces":True,"tab-size":True,"unitless-zero":True,"vendor-prefix-align":True,"sort-order":[["display","visibility","float","clear","overflow","overflow-x","overflow-y","clip","zoom"],["table-layout","empty-cells","caption-side","border-spacing","border-collapse","list-style","list-style-position","list-style-type","list-style-image"],["-webkit-box-orient","-webkit-box-direction","-webkit-box-decoration-break","-webkit-box-pack","-webkit-box-align","-webkit-box-flex"],["position","top","right","bottom","left","z-index"],["margin","margin-top","margin-right","margin-bottom","margin-left","-webkit-box-sizing","-moz-box-sizing","box-sizing","border","border-width","border-style","border-color","border-top","border-top-width","border-top-style","border-top-color","border-right","border-right-width","border-right-style","border-right-color","border-bottom","border-bottom-width","border-bottom-style","border-bottom-color","border-left","border-left-width","border-left-style","border-left-color","-webkit-border-radius","-moz-border-radius","border-radius","-webkit-border-top-left-radius","-moz-border-radius-topleft","border-top-left-radius","-webkit-border-top-right-radius","-moz-border-radius-topright","border-top-right-radius","-webkit-border-bottom-right-radius","-moz-border-radius-bottomright","border-bottom-right-radius","-webkit-border-bottom-left-radius","-moz-border-radius-bottomleft","border-bottom-left-radius","-webkit-border-image","-moz-border-image","-o-border-image","border-image","-webkit-border-image-source","-moz-border-image-source","-o-border-image-source","border-image-source","-webkit-border-image-slice","-moz-border-image-slice","-o-border-image-slice","border-image-slice","-webkit-border-image-width","-moz-border-image-width","-o-border-image-width","border-image-width","-webkit-border-image-outset","-moz-border-image-outset","-o-border-image-outset","border-image-outset","-webkit-border-image-repeat","-moz-border-image-repeat","-o-border-image-repeat","border-image-repeat","padding","padding-top","padding-right","padding-bottom","padding-left","width","min-width","max-width","height","min-height","max-height"],["font","font-family","font-size","font-weight","font-style","font-variant","font-size-adjust","font-stretch","font-effect","font-emphasize","font-emphasize-position","font-emphasize-style","font-smooth","line-height","text-align","-webkit-text-align-last","-moz-text-align-last","-ms-text-align-last","text-align-last","vertical-align","white-space","text-decoration","text-emphasis","text-emphasis-color","text-emphasis-style","text-emphasis-position","text-indent","-ms-text-justify","text-justify","letter-spacing","word-spacing","-ms-writing-mode","text-outline","text-transform","text-wrap","-ms-text-overflow","text-overflow","text-overflow-ellipsis","text-overflow-mode","-ms-word-wrap","word-wrap","-ms-word-break","word-break"],["color","background","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader","background-color","background-image","background-repeat","background-attachment","background-position","-ms-background-position-x","background-position-x","-ms-background-position-y","background-position-y","-webkit-background-clip","-moz-background-clip","background-clip","background-origin","-webkit-background-size","-moz-background-size","-o-background-size","background-size"],["outline","outline-width","outline-style","outline-color","outline-offset","opacity","filter:progid:DXImageTransform.Microsoft.Alpha(Opacity","-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha","-ms-interpolation-mode","-webkit-box-shadow","-moz-box-shadow","box-shadow","filter:progid:DXImageTransform.Microsoft.gradient","-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient","text-shadow"],["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition","-webkit-transition-delay","-moz-transition-delay","-ms-transition-delay","-o-transition-delay","transition-delay","-webkit-transition-timing-function","-moz-transition-timing-function","-ms-transition-timing-function","-o-transition-timing-function","transition-timing-function","-webkit-transition-duration","-moz-transition-duration","-ms-transition-duration","-o-transition-duration","transition-duration","-webkit-transition-property","-moz-transition-property","-ms-transition-property","-o-transition-property","transition-property","-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform","-webkit-transform-origin","-moz-transform-origin","-ms-transform-origin","-o-transform-origin","transform-origin","-webkit-animation","-moz-animation","-ms-animation","-o-animation","animation","-webkit-animation-name","-moz-animation-name","-ms-animation-name","-o-animation-name","animation-name","-webkit-animation-duration","-moz-animation-duration","-ms-animation-duration","-o-animation-duration","animation-duration","-webkit-animation-play-state","-moz-animation-play-state","-ms-animation-play-state","-o-animation-play-state","animation-play-state","-webkit-animation-timing-function","-moz-animation-timing-function","-ms-animation-timing-function","-o-animation-timing-function","animation-timing-function","-webkit-animation-delay","-moz-animation-delay","-ms-animation-delay","-o-animation-delay","animation-delay","-webkit-animation-iteration-count","-moz-animation-iteration-count","-ms-animation-iteration-count","-o-animation-iteration-count","animation-iteration-count","-webkit-animation-direction","-moz-animation-direction","-ms-animation-direction","-o-animation-direction","animation-direction"],["content","quotes","counter-reset","counter-increment","resize","cursor","-webkit-user-select","-moz-user-select","-ms-user-select","user-select","nav-index","nav-up","nav-right","nav-down","nav-left","-moz-tab-size","-o-tab-size","tab-size","-webkit-hyphens","-moz-hyphens","hyphens","pointer-events"]]}}};c1p=None;c1cb=None;arr2=None;arr3=None;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();pp=sublime.packages_path();arr=[v for v in pl.split(',') if not os.path.exists(os.path.join(ipp,v+'.sublime-package')) and not os.path.exists(os.path.join(pp,v))];pl=','.join(arr);c1=compile('global c1p;global c1cb;cip=os.path.join(ipp,c1p);cip2=os.path.join(pp,c1p.split(".")[0]);sublime.set_timeout(lambda:exec(c1cb),10000) if os.path.exists(cip) or os.path.exists(cip2) else sublime.set_timeout(lambda:exec(c1), 3000);','','exec');c11=compile('global arr;global arr2;global...

公众号

加我赏红包,哈哈哈

公众号

欢迎关注 极限前端 公众号