有关js的一些小问题
忘了从哪里找来抄下来的:
js执行顺序问题
1.函数的声明和调用
“定义式”函数声明
function fn1() {......}
"赋值式"函数声明
var f=function fn1() {......}
页面加载过程中,浏览器会对页面上或载入的每个js代码块(或文件)进行扫描,如果遇到定义式函数,则进行预处理(类似于C等的编译),处理完成之后再开始由上至下执行;遇到赋值式函数,则只是将函数赋给一个变量,不进行预处理(类似1中变量必须先定义后引用的原则),待调用到的时候才进行处理。
eg:函数调用与声明先后的问题
fn1();//正常执行,输出 “234”
function fn1() {alert(123);}
fn1();//输出 “234” 先预编译声明,预编译时后面的声明已经覆盖前面的声明
function fn1() {alert(234);}
fn1();//输出 “234”
------------------------------
fn1();//运行报错,浏览器未对fn1赋值定义进行预处理,依序执行,函数未定义,报错
var fn1 = function() {alert(123);}
fn1();//输出 “123” 按顺序执行
fn1 = function() {alert(234);}
fn1();//输出 “234” 后面的赋值覆盖了前面的
-------------------------------
“代码块”是指一对<script type=”text/网页特效”></script>标签包裹着的js代码,浏览器对每个块或文件进行独立的扫描,然后对全局的代码进行顺序执行。所以,在一个块(文件)中,函数可以在调用之后进行“定义式”定义;但在两个块中,定义函数所在的块必须在函数被调用的块之前。
eg:
<script type="text/javascript">
Fn();
</script>
<script type="text/javascript">
function Fn(){
alert("Hello World!");
}
</script>
// 报错:Fn is notdefined,解决方法 两个块换过来。先声明,在调用
--------------------------------------
body的onload函数与body内部函数的执行
body内部的函数会先于onload的函数执行
eg:
//html head...
<head>
<script type="text/javascript">
function fnOnLoad(){ alert("I am outside the Wall!"); }
</script>
</head>
<body onload="fnOnLoad();">//后执行
<script type="text/javascript">
alert("I am inside the Wall..");//先执行
</script>
</body>
//先弹出“I am inside the Wall..”;
//后弹出“I am outside the Wall!”
body的onload事件触发条件是body内容加载完成,而body中的js代码会在这一事件触发之前运行(为什么呢?下面线程讨论告诉你..)
-----------------------------
js是多线程or单线程
严格说js没有多线程的概念,所有的线程都是单线程依次执行。
eg:
function fn1() {alert(“1到100加和是4950”);}
function fn2() {alert ("早知道,就不说");}
fn1();
fn2();
//先弹出 “1到100加和是4950”,后弹出 "早知道,就不说"
延时执行、Ajax异步加载,不是多线程的吗?不是。看起来像“多线程”
eg:
function fn1(){
setTimeout(function(){
alert("我先调用")
},1000);
}
function fn2(){
alert("我后调用");
}
fn1();
fn2();
// 先弹出:“我后调用”,
// 1秒后弹出:“我先调用”
看上去,fn2()和延时程序是分两个过程再走,但其实,这是JavaScript中的“回调”机制在起作用,类似于操作系统中的“中断和响应” ——延时程序设置一个“中断”,然后执行fn2(),待1000毫秒时间到后,再回调执行fn1()。
同样,上面中body的onload事件调用的函数,也是利用了回调机制——body加载完成之后,回调执行fnOnLoad()函数。
Ajax请求中的数据处理函数也是一样的道理。
关于JavaScript线程问题的更深入讨论,看这篇 javascript中的线程之我见,以及infoQ上的 JavaScript多线程编程简介。
困了,再说一下回调函数吧。
7. 回调函数
回调函数是干嘛用的?就是回调执行的函数嘛,又废话:D
如6所说,最常见的回调就是onclick、onmouseo教程ver、onmousedown、onload等等浏览器事件的调用函数;还有Ajax异步请求数据的处理函数;setTimeOut延时执行、setInterval循环执行的函数等。
干脆我们写一个纯粹的回调函数玩:
代码如下:
复制代码 代码如下:
function onBack(num){
alert("姗姗我来迟了");
// 执行num个耳光
}
function dating(hours, callBack){
var SP= 0; // SP,愤怒值
//女猪脚在雪里站了hours个钟头
//循环开始..
SP ++;
//循环结束...
callBack(SP);
}
dating(1, onBack);
有关js的一些小问题的更多相关文章
- html+js 的一些小问题
html+js 的一些小问题: 选择器+遍历函数: $("#taskStatusList tr:gt(0)").find("td:eq(3)").find(&q ...
- 用js实现2048小游戏
用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- js 数组去重小技巧
js 数组去重小技巧 Intro 今天遇到一个问题,需要对数据进行去重,想看一下有没有什么比较方便的方法,果然有些收获. Question 问题描述: 我有一个这样的数据: [ { "Pro ...
- MPVUE - 使用vue.js开发微信小程序
MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...
- 使用JS实现2048小游戏
JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...
- js中OOP小指南
js中OOP小指南 在指南中,我将尝试解析以面向对象规范聚焦的es6的新特性. 首先, 什么是设计模式 范例是某个事务的例子或模型,在某种情况下,按照一种模式创建了计算机程序. 什么是面向对象 显然你 ...
- js 回调函数小例子
js 回调函数小例子 <script> //将函数作为另一个函数的参数 function test1(){ alert("我是test1"); } function t ...
- js写个小时钟
原生js写个小时钟 一.代码 今天美化博客园自学的哈,分享一下 <!--标题变成时钟--> <div id="Header1_HeaderTitle">&l ...
随机推荐
- 自定义列表dl
语法格式 <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... ...
- eCharts图表(polar极坐标图)
极坐标图 HTML: <div id="eChart"></div> css: #eChart{ width:500px; height:500px; } ...
- Visual Studio 2010 vs2010 英文版 使用 已有的中文版 MSDN 帮助文档
第一步 设置Help Library Manager区域语言 打开Microsoft Visual Studio 2010开始菜单里Visual Studio Tools里的Manage Help S ...
- 【Android开发笔记】返回上层Activity的正确打开方式
技术支持 http://stackoverflow.com/questions/12276027/how-can-i-return-to-a-parent-activity-correctly 首先, ...
- 【Android开发笔记】杂项
Android studio shift+enter : start new line Theme 将 <style name="AppBaseTheme" pare ...
- Java interface和abstract小记
一.abstract 用abstract修饰的类叫做抽象类,用abstract修饰的方法叫抽象方法. 含有抽象方法的类必须被声明为抽象类,抽象类必须被继承,抽象方法必须被重写. 抽象类不能被实例化. ...
- 自己实现的简单的grid
12年在第一家公司的时候,有过很长一段时间在前端的使用研究上.一开始的时候使用ExtJs4.0 MVC 来开发前端,觉得里面的风转的组件非常好用,Panel.window.tree等等,简化了对于前端 ...
- cms-友情链接实现静态化
service: package com.open1111.service.impl; import java.util.List; import javax.servlet.ServletConte ...
- UOJ#210. 【UER #6】寻找罪犯 2-sat
#210. [UER #6]寻找罪犯 链接:http://uoj.ac/problem/210 想法:2-sat模型.每个人拆点,分别表示为犯人.非犯人.每个句供词拆点,分别表示真话.假话.供词与对应 ...
- System.FormatException: GUID 应包含带 4 个短划线的 32 位数(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)。解决办法
查一下数据库的UID数据是否格式正确,如: 错误格式1: {E056BB36-D824-4106-A9C3-D8D8B9ADC1C 错误格式2: E056BB36-D824-4106-A9C3-D8D ...