`
isiqi
  • 浏览: 16706498 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

setTimeout妙用,可作loading功能,智能化的提示

阅读更多

解述:
示例:setTimeout('input_update()',3000);setTimeout('location.href=index.jsp',3000);
可以见setTimeout主要的两个参数的意义是接js处理函数,后一个是延迟操作的时间设定.
setInterval这个为定时检查的函数

(一)首先第一个例子:setTimeout 实现重复调用:
<input name='input1'></input>
<input name='input2'></input>
<input name='input3'></input>
<script language='javascript'>
var inputAt = 0;
var inputAtD = 0;
var inputTimer;
var inputInterval=1000;
function input_update() {
inputAt++;
inputAtD++;
inputTimer = setTimeout('input_update()',inputInterval);
document.getElementById('input'+inputAt).value = inputAtD;
if(inputAt==3)inputAt=0;
}
input_update();
</script>

(二)setTimeout 实现Loading进度条

<div align = "center" style='width:115px;height:20px;font-size:8pt;padding:2px;border:solid black 1px'>
<span id='progress1'>&nbsp; &nbsp;</span>
<span id='progress2'>&nbsp; &nbsp;</span>
<span id='progress3'>&nbsp; &nbsp;</span>
<span id='progress4'>&nbsp; &nbsp;</span>
<span id='progress5'>&nbsp; &nbsp;</span>
<span id='progress6'>&nbsp; &nbsp;</span>
<span id='progress7'>&nbsp; &nbsp;</span>
<span id='progress8'>&nbsp; &nbsp;</span>
<span id='progress9'>&nbsp; &nbsp;</span>
</div>
<script language='javascript'>
var progressEnd = 9;
var progressColor = 'red';
var progressInterval = 500;
var progressAt = 0;
var progressTimer;

function progress_update() {
progressAt++;
document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
progressTimer = setTimeout('progress_update()',progressInterval);
if(progressAt==9)
{
progressAt=0;
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
}
}

progress_update();
</script>

(三)setTimeout 实现智能化的提示
<input name='input1'></input>
<script language='javascript'>
var inputAt1 = "正在操作中....";//"正在操作中....";
var inputAt2 = "操作成功正在返回....";//操作成功在返回....";
var inputTimer;
var inputInterval=3000;

document.getElementById('input1').value = "操作成功在返回....";
function input_update() {
inputTimer = setTimeout('input_update()',inputInterval);
if(document.getElementById('input1').value == inputAt2)
document.getElementById('input1').value = inputAt1;
else
document.getElementById('input1').value = inputAt2;
}
input_update();
</script>

探讨:
<script language='javascript'>
function interval_check()
{
var start_time=new Date(); var sleep_msec=xxxxx;
//在core_function中检查是否到时,例如:
now_time=new Date();
if(now_time-start_time>sleep_msec) mission_completed=true
}
</script>
setInterval这个为定时检查的函数
setintervalID=window.setInterval('interval_check();',interval);
通过这两者的结合可以实现
在JS中实现类C#等等的sleep()函数的能力.

分享到:
评论

相关推荐

    解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

    关于在Vue中管理setTimeout和setInterval,尤其是涉及到Vue的路由切换时定时器未被销毁的问题,主要涉及到Vue的生命周期钩子、JavaScript的this关键字以及ES6箭头函数的特性。 首先,Vue中的生命周期钩子允许我们在...

    setTimeout应用(模拟站长之家导航)

    4. **加载提示**:如果导航栏包含异步加载的内容,`setTimeout`可以用来在加载开始后显示加载提示,并在内容加载完成后再清除提示。 5. **节流和防抖**:在处理用户输入,如连续快速点击导航链接时,可以使用`...

    jQuery setTimeout()函数使用方法

    setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用.我在 代码如下:$(document).ready(function(){setTimout(test(),200); function test() { alert&#40;1&#...

    Javascript定时器(二)——setTimeout与setInterval

    JavaScript定时器是编程中不可或缺的一部分,它们允许我们延迟执行代码或定期执行代码。在这个主题中,我们将深入探讨`setTimeout`和`setInterval`这两个核心定时器函数,它们在JavaScript中的应用以及它们之间的...

    setTimeout使用注意事项1

    由于 `setTimeout` 的延迟值是用32位整数表示的,因此最大可设置的延迟时间为约2147483647毫秒(约24.8天)。超过这个值会导致延迟值溢出,回调函数可能会被立即执行。 6. **回调函数中的 `this` 指向**: 当回调...

    setTimeout制作36选7

    在JavaScript编程中,`setTimeout`是一个非常重要的函数,它用于在指定的时间(以毫秒为单位)后调用一个函数或者执行某段代码。在这个场景中,“setTimeout制作36选7”指的是利用`setTimeout`来模拟一个彩票抽奖...

    JS 写的Loading Mask

    其中.htm文件是一个HTML页面,展示了如何在实际场景中使用Loading Mask,而_files目录则可能包含了与该示例相关的CSS、JavaScript文件或者其他资源,用于支持页面的正常运行。 在JavaScript实现Loading Mask的过程...

    JavaScript中SetInterval与setTimeout的用法详解

    注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串。 millisec 必需,在执行代码前需等待的毫秒数。 setTimeinterval ...

    AjaxLoading

    在JavaScript中,可以使用setTimeout和clearTimeout来控制加载动画的显示和隐藏。而jQuery提供了更简洁的API,如`$.ajaxStart()`和`$.ajaxStop()`,它们可以在Ajax请求开始和结束时触发回调函数,从而控制加载动画的...

    html信息提交提示框

    在创建提示框时,我们通常会使用`&lt;div&gt;`元素作为容器,因为它可以容纳各种内容并方便地通过CSS进行样式化。例如,一个基本的提示框结构可能如下: ```html &lt;div id="tsk-alert" class="tsk-alert tsk-alert-loading...

    向setTimeout传递函数参数

    在JavaScript编程中,`setTimeout`是一个非常常用的函数,它用于在指定的时间(以毫秒为单位)后调用一个函数或者执行某段代码。这个功能对于实现延迟执行、动画效果或者定时任务等场景非常关键。在本文中,我们将...

    Javascript中, setTimeout() 和 setInterval() 的方法

    然而,需要注意的是,`setInterval()`在某些场景下可能导致意料之外的行为,因此在可能的情况下,使用`setTimeout()`配合递归调用来实现周期性任务可能更为可控。 例如,实现每2秒执行一次的循环,可以这样写: ```...

    动态的Loading文字,逐个变大.rar

    在JavaScript中,我们可以使用`setTimeout`或`setInterval`函数来控制动画的定时执行。例如,可以设置一个循环,每次迭代时添加一个字符到HTML元素,并使用CSS的`transform`属性来改变其大小。CSS的`transition`属性...

    一个适合做页面 “加载中” 效果的插件 jquery-loading

    "jquery-loading"插件则是在jQuery基础上构建的,它的主要功能是在页面内容加载时展示一个视觉提示,告诉用户页面正在处理请求。这个提示通常是一个旋转的菊花图案或者其他的动画效果,既美观又实用,能够有效地告知...

    仿新浪微博登录框autoMail自动智能邮箱提示功能

    5. **优化性能**:为了防止频繁的计算对性能造成影响,可以设置一个延迟器(如`setTimeout`与`clearTimeout`配合使用),在用户停止输入一段时间后再进行匹配和提示,提高用户体验。 6. **用户交互**:当用户选择一...

    利用setTimeout解决延时执行某操作

    setTimeout,javascript 延时执行函数,闭包处理 利用javascript闭包处理延时操作

    javascript实现一个网页加载进度loading

    为了实现进度更新,我们可以使用 JavaScript(这里使用 jQuery)设置一个定时器,逐步增加进度值,并在窗口加载完成后隐藏 loading 指示器: ```javascript var $loading = $('#loading'); var $progress = $('#...

    使用setTimeout()方法模拟进度条

    使用setTimeout()方法模拟进度条

    jquery loading遮罩层插件

    在网页开发中,当用户触发需要等待的操作时,如数据加载或页面跳转,为了提供良好的用户体验,通常会使用loading动画来提示用户系统正在处理请求。"busy-load"就是这样一个专门用于jQuery的加载遮罩层插件,它能够...

    模态对话框导致setTimeout失效的解决方案(一)

    在IT行业中,我们经常遇到各种各样的问题,其中之一就是在使用模态对话框时,发现`setTimeout`函数似乎不再按照预期工作。这个问题主要出现在JavaScript编程环境中,尤其是在与UI交互时。模态对话框,如Bootstrap的...

Global site tag (gtag.js) - Google Analytics