代码说

code is poetry

代码说    
碎碎念:燃烧你的梦,追求着真实、昂首挺胸的你热血沸腾到让人无法接近!  换一换

js延时执行事件实例

作者:coderzheng 发布于:2015-12-28 12:01 Monday 分类:javascript  阅读模式

我们想要实现一种"伪ajax"的效果,比如像这样:点击页面上的button之后,会有一个"滚动"等待样式的图片出现。几秒钟之后,图片消失,页面上的dom元素节点发生变化。但是这个过程中代码并没有进行真正的ajax请求,只是调用了一个js的延时事件。所以用户只是看上去好像在等待后台执行某个事件,贴链接:http://codespeaking.com/library/test_01.html
贴代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
function start() {
//alert("okok");
$('#info').val("计时开始");
$('#img').show();
setTimeout("stop()", 3000);
}

function stop() {
$('#info').val("计时结束");
$('#img').hide();
}
//setTimeout("delay()", 2000);
</script>
</head>
<body>
<div style="padding:10px 20px;">
<h1>js延时执行事件实例</h1>
<h6>点击button, 立刻出现图片, 同时input框提示计时开始, 3秒钟后图片消失, input框提示计时结束, 这个实例可以用来模拟ajax的延时执行过程.</h6>
<input type="text" id="info" value="初始值" />&nbsp;&nbsp;<input type="button" value="Click"  id="btn" onclick="start();" />&nbsp;<img id="img" src="images/ajax-loader.gif" style="vertical-align:middle;display:none;" />
</div>
</body>
</html>
PS:你可能会问,这个例子有什么用,说实话它其实是用来欺骗用户滴,。真正的用处也有一点,比如你在这个间隔时间里面调用curl进行了一次异步请求(为什么要用curl,而不是ajax,因为curl不需要等待回调啊!),这个请求的时间可能很长(但是结果不足以被当前用户察觉(比如发了一封邮件)),所以我们才用了伪ajax来增强用户体验。




over.

标签: javascript jquery

你可以发表评论、引用到你的网站或博客,或通过RSS 2.0订阅这个博客的所有文章。
上一篇: 冬天  |  下一篇:从分页类到ACL