js中自定义方法实现停留几秒sleep


Posted in Javascript onJuly 11, 2014

js中不存在自带的sleep方法,要想休眠要自己定义个方法

function sleep(numberMillis) { 
var now = new Date(); 
var exitTime = now.getTime() + numberMillis; 
while (true) { 
now = new Date(); 
if (now.getTime() > exitTime) 
return; 
} 
}

以下是补充:

除了Narrative JS,jwacs(Javascript With Advanced Continuation Support) 也致力于通过扩展JavaScript语法来避免编写让人头痛的异步调用的回调函数。用jwacs 实现的sleep,代码是这样:

function sleep(msec) {

    var k = function_continuation;

    setTimeout(function() { resume k <- mesc; }, msec);

    suspend;

}

这个语法更吓人了,而且还是java里不被推荐使用的线程方法名。坦白说我倾向于 Narrative JS。

同Narrative JS一样,jwacs也需要预编译,预编译器是用 LISP 语言编写。目前也是 Alpha 的版本。两者的更多介绍和比较可以参阅 SitePoint 上的新文章: Eliminating async Javascript callbacks by preprocessing

编写复杂的JavaScript脚本时,有时会有需求希望脚本能停滞指定的一段时间,类似于 java 中的 Thread.sleep 或者 sh 脚本中的 sleep 命令所实现的效果。

众所周知,JavaScript 并没有提供类似于 Java 的线程控制的功能, 虽然有 setTimeout 和 setInterval 两个方法可以做一些定时执行控制,但并不能满足所有的要求。一直以来,都有很多人问如何在JavaScript中实现 sleep/pause/wait ,也确实有些很蹩脚的解决方案:

最简单也最糟糕的方法就是写一个循环,代码可能如下:

function sleep(numberMillis) {

    var now = new Date();

    var exitTime = now.getTime() + numberMillis;

    while (true) {

        now = new Date();

        if (now.getTime() > exitTime)

            return;

    }

}

如上的代码其实并没有让脚本解释器sleep下来,而且有让CPU迅速上到高负荷的附作用。浏览器甚至会在该段时间内处于假死状态。

其二有聪明人利用IE特殊的对话框实现来曲径通幽,代码可能如下:

function sleep(timeout) {

 window.showModalDialog("javascript:document.writeln('<script>window.setTimeout(function () { window.close(); }, " + timeout + ");<\/script>');");

}window.alert("before sleep ...");

sleep(2000);

window.alert("after sleep ...");

缺点不用多说,只有IE支持(IE7因为安全限制也而不能达到目的)。

除上之外,还有利用Applet或者调用Windows Script Host的WScript.Sleep()等等鬼点子,这些都是万不得已的权宜之计。

终于有了更聪明的人,开发出了也许是最佳的方案,先看代码:

function sleep(millis) {

    var notifier = NjsRuntime.createNotifier();

    setTimeout(notifier, millis);

    notifier.wait->();

}

没错,看到 ->() 这样的语法,就象刚看到Prototype的 $() 函数一样让我惊为天人。不过直接在浏览器中这段脚本是会报告语法错误的。实际上它们需要经过预编译成客户端浏览器认可的JavaScript。编译后的脚本如下:

function sleep(millis){

var njf1 = njen(this,arguments,"millis");

nj:while(1) {

try{switch(njf1.cp) { 

case 0:njf1._notifier=NjsRuntime.createNotifier();

setTimeout(njf1._notifier,njf1._millis);

njf1.cp = 1;

njf1._notifier.wait(njf1);

return;

case 1:break nj;

}} catch(ex) { 

if(!njf1.except(ex,1)) 

return; 

}} 

njf1.pf();

}

我看不懂,也不想去看懂了。这些工作全部会由 Narrative JavaScript ———— 一个提供异步阻塞功能的JS扩展帮我们实现。我们只需要编写之前那个怪异的 ->() 语法, 然后通过后台预先静态编译或者前台动态编译后执行就可以实现 sleep 的效果。
Narrative JavaScript 宣称可以让你从头昏眼花的回调函数中解脱出来,编写清晰的Long Running Tasks。目前还是 alpha 的版本,在 Example 页面上有一个移动的按钮的范例。首页上也提供了源码下载。以我薄弱的基础知识,我只能勉强的看出代码中模拟了状态机的实现,希望有精通算法的朋友能为我们解析。
最后,还是我一直以来的观点: 除非很必要,否则请保持JavaScript的简单。在JavaScript 能提供原生的线程支持之前,或许我们可以改变设计以避免异步阻塞的应用。

有bug的曲折实现

<script type"text/javascript">
/*Javascript中暂停功能的实现
Javascript本身没有暂停功能(sleep不能使用)同时 vbscript也不能使用doEvents,故编写此函数实现此功能。
javascript作为弱对象语言,一个函数也可以作为一个对象使用。
比如:

[code]
function Test(){
 alert("hellow");
 this.NextStep=function(){
 alert("NextStep");
 }
}
我们可以这样调用 var myTest=new Test();myTest.NextStep();
我们做暂停的时候可以吧一个函数分为两部分,暂停操作前的不变,把要在暂停后执行的代码放在this.NextStep中。
为了控制暂停和继续,我们需要编写两个函数来分别实现暂停和继续功能。
暂停函数如下:
*/
function Pause(obj,iMinSecond){
 if (window.eventList==null) window.eventList=new Array();
 var ind=-1;
 for (var i=0;i<window.eventList.length;i++){
 if (window.eventList[i]==null) {
  window.eventList[i]=obj;
  ind=i;
  break;
 }
 }
 
 if (ind==-1){
 ind=window.eventList.length;
 window.eventList[ind]=obj;
 }
 setTimeout("GoOn(" + ind + ")",1000);
}
/*
该函数把要暂停的函数放到数组window.eventList里,同时通过setTimeout来调用继续函数。
继续函数如下:
*/

function GoOn(ind){
 var obj=window.eventList[ind];
 window.eventList[ind]=null;
 if (obj.NextStep) obj.NextStep();
 else obj();
}
/*
该函数调用被暂停的函数的NextStep方法,如果没有这个方法则重新调用该函数。
函数编写完毕,我们可以作如下册是:
*/
function Test(){
 alert("hellow");
 Pause(this,1000);//调用暂停函数
 this.NextStep=function(){
 alert("NextStep");
 }
}
</script>
Javascript 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
使用jquery prev()方法找到同级的前一个元素
Jul 11 #Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 #Javascript
常用jQuery选择器总结
Jul 11 #Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 #Javascript
js动态改变select选择变更option的index值示例
Jul 10 #Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 #Javascript
js确认删除对话框适用于a标签及submit
Jul 10 #Javascript
You might like
PHP面向对象编程快速入门
2006/10/09 PHP
php创建多级目录代码
2008/06/05 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python中unittest用法实例
2014/09/25 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python之消除前缀重命名的方法
2018/10/21 Python
python 读取修改pcap包的例子
2019/07/23 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
学校爱国卫生月活动总结
2014/06/25 职场文书
环保志愿者活动方案
2014/08/14 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python