一次惨痛的经历

来源：互联网发布：mysql查看当前时间命令编辑：程序博客网时间：2024/04/29 17:45

setTimeout的原理及在JavaScript线程执行队列中的位置 开发中经常使用setTimeout进行一些延迟操作。昨天突然想了解下setTimeout的handler到底在队列中的什么位置特别好奇。今天特地来测试下。定义和用法setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。语法setTimeout(code,millisec)参数描述code 必需。要调用的函数后要执行的 JavaScript 代码串。 millisec 必需。在执行代码前需等待的毫秒数。 提示和注释提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。以上定义来源于w3school.comJavaScirpt线程先了解下浏览器，浏览器是多线程的。1.JavaScript引擎线程2.界面渲染线程3.浏览器事件触发线程4.Http请求线程JS运行在浏览器中，是单线程的，每个window一个JS引擎线程。既然是单线程的，的在某个特定的时刻只有特定代码能被执够行，并阻塞其它的代码。（至于ajax的实现这里就不说了。）原理 来了解下setTimeout的简单的原理：setTimeout调用的时候，JavaScript引擎会启动定时器timer，大约millisec(ms)以后执行code，当定时器时间到，就把该事件放到主事件队列等待处理。注意：浏览器JavaScript线程空闲的时候才会真正执行为什么呢？因为当JavaScript线程的正在出来其他JavaScript代码时，其实以已经阻塞了其他的代码，其中包括的setTimeout的定时器部分的实现。代码测试复制代码<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script type="text/javascript">        function testHandler() {            console.log("调用了setTimeout的函数");        }        window.onload = function () {            console.log("开始");            console.log("设置setTimeout 100ms");            setTimeout(testHandler,100);            console.log("休眠1000ms");            sleep(1000);            testNext();            console.log("结束");        }        function testNext() {            console.log("后续执行的函数");        }        function sleep(number) {            var now = new Date();            var exitTime = now.getTime() + number;            while (true) {                now = new Date();                if (now.getTime() > exitTime)                    return;            }        }    </script></head><body></body></html>复制代码最终浏览器输出的结果：此处setTimeout其实只延迟了100ms。而进setTimeout到结束中先模拟休眠了2000ms，然后再执行了testNext函数。但是从测试结果来看实际上testHandler却是在整个队列的最后。这就解释了上诉中说的，setTimeout将code加入到队列的操作必须是在线程空闲的时候才会执行了。millisec参数有什么用？上诉测试发现，实际应用中。setTimeout的millisec参数不管你设置多少，实际执行都是在线程的最后，因为在执行一个操作的时候，JavaScript肯定是一直把代码执行完后再走setTimeout绑定的code的。那么问题来了。setTimeout(handler,0)和setTimeout(handler,100)在单独使用时，好像并没有区别。（中间执行的代码处理时间超过100ms时）复制代码 <script type="text/javascript">        function testHandler() {            console.log("调用了setTimeout的函数");        }        window.onload = function () {            console.log("开始");            console.log("设置setTimeout 100ms");            setTimeout(testHandler,100);            setTimeout(function () { console.log("调用了setTimeout的函数2"); }, 50);            console.log("休眠1000ms");            sleep(1000);            testNext();            console.log("结束");        }        function testNext() {            console.log("后续执行的函数");        }        function sleep(number) {            var now = new Date();            var exitTime = now.getTime() + number;            while (true) {                now = new Date();                if (now.getTime() > exitTime)                    return;            }        }    </script>复制代码输出结果：个人认为millisec一般在多个setTimeout一起使用的时，需要区分哪个先加入到队列的时候才有用，否则都可以设置成setTimeout(handler,0)（异步操作不在讨论范围内）以上哪有写的不对的地方欢迎指正学习。^3^欢迎转载

js数组依据下标删除元素 (2012-12-28 17:34:09)转载▼标签： it  分类： 日常学习一直在使用js相关的东西，但很少作总结，今天遇到操作js数组的一些问题，对js的数组有了更进一步的认识！1、创建数组var array = new Array();var array = new Array(size);//指定数组的长度var array = new Array(item1,item2……itemN);//创建数组并赋值2、取值、赋值var item = array[index];//获取指定元素的值array[index] = value;//为指定元素赋值3、添加新元素array.push(item1,item2……itemN);//将一个或多个元素加入数组，返回新数组的长度array.unshift(item1,item2……itemN);//将一个或多个元素加入到数组的开始位置，原有元素位置自动后移，返回  新数组的长度array.splice(start,delCount,item1,item2……itemN);//从start的位置开始向后删除delCount个元素，然后从start的位置开始插入一个或多个新元素4、删除元素array.pop();//删除最后一个元素，并返回该元素array.shift();//删除第一个元素，数组元素位置自动前移，返回被删除的元素array.splice(start,delCount);//从start的位置开始向后删除delCount个元素5、数组的合并、截取array.slice(start,end);//以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素array.concat(array1,array2);//将多个数组拼接成一个数组6、数组的排序array.reverse();//数组反转array.sort();//数组排序，返回数组地址7、数组转字符串array.join(separator);//将数组原因用separator连接起来列了这么都就是没有发现删除数组元素的方法！于是查了一些资料找到了解决方法。删除数组元素需要扩展Array原型prototype.Array.prototype.del=function(index){        if(isNaN(index)||index>=this.length){            return false;        }        for(var i=0,n=0;i            if(this[i]!=this[index]){                this[n++]=this[i];            }        }        this.length-=1;    };

  将图片转成二进制并生成Base64编码，可以在网页中通过url查看图片:data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。  另外听说这种方式可以将一些敏感的图片放进网页中

 获取整数的长度可以用以下几种方法实现：1.调用toString方法转为字符串后取长度var num = 123;alert(num.toString().length);2.隐式转字符串后取长度var num = 123;alert((num + '').length)推荐第1种方法，简单高效js 获取页面中所有的checkboxvar inputs = document.getElementsByTagName("input");//获取所有的input标签对象var checkboxArray = [];//初始化空数组，用来存放checkbox对象。for(var i=0;i<inputs.length;i++){  var obj = inputs[i];  if(obj.type=='checkbox'){     checkboxArray.push(obj);  }}所有的checkbox对象都存在checkboxArray这个数组里了。 JS倒序输出字符串<html>    <head><title>JS倒序输出字符串</title><script>    function Show(){        var str="ABCDE";        var strShow="";              document.write(str+"<br>");        for(var i=str.length-1; i>=0; i--) {            strShow+=str.substring(i,i+1);            alert(strShow);        }        document.write("<font color=red>"+strShow+"</font>");    }</script></head><body><SCRIPT LANGUAGE="JavaScript">Show();</SCRIPT></body></html>如何判断传过来的JSON数据中，某个字段是否存在 1.obj["key"] != undefined 这种有缺陷，如果这个key定义了，并且就是很2的赋值为undefined，那么这句就会出问题了。 2.!("key" in obj) 3.obj.hasOwnProperty("key") 这两种方法就比较好了，推荐使用。 JavaScript模拟的IP输入框<body><script ID="clientEventHandlersJS" LANGUAGE="javascript"><!--function T1_onkeyup() {  if(document.card.T1.value.length==3){     document.card.T2.focus();   }} function T2_onkeyup() {  if(document.card.T2.value.length==3){     document.card.T3.focus();   }}function T3_onkeyup() {  if(document.card.T3.value.length==3){     document.card.T4.focus();   }}//--></script><form method="POST" name="card" action>输入IP：<input type="text" name="T1" size="4" maxlength="4" LANGUAGE="javascript" onkeyup="return T1_onkeyup()">.<input type="text" name="T2" size="4" maxlength="4" LANGUAGE="javascript" onkeyup="return T2_onkeyup()">.<input type="text" name="T3" size="4" maxlength="4" LANGUAGE="javascript" onkeyup="return T3_onkeyup()">.<input type="text" name="T4" size="4" maxlength="4"></form> </body>

we are cloud –>We Are Cloud

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8" />        <title>Document</title>        <script type="text/javascript">            //1.toLocaleUpperCase            //将字符串中所有的字母字符都将被转换为大写的，同时适应宿主环境的当前区域设置。            //2.toUpperCase            //将字符串中的所有字母都被转化为大写字母。            //3.toLocaleLowerCase            //将字符串所有的字母字符都被转换为小写，同时考虑到宿主环境的当前区域设置。            //4.toLowerCase            //将字符串中的字母被转换为小写字母。//          string.substr(start,length)//          start   必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。//          length  可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。            var str = "we are cloud";            document.writeln('原字符串' + str + '<br />');            document.writeln('字母字符都被转换为大写' + str.toLocaleUpperCase() + '<br />');            document.writeln('字母字符都被转换为小写' + str.toLocaleLowerCase() + '<br />');            var _str = str.split(' ');            var b = '';            for (var i = 0; i < _str.length; i++) {                b += _str[i].substr(0, 1).toUpperCase() + _str[i].substr(1) + " ";            }            document.writeln(b); //We Are Cloud        </script>    </head>    <body>    </body></html>

0 0