JS运行耗时操作的延时显示方法

代码如下：


代码如下:

document.getElementById("btnConnect").value = "连接中";
Connect(); // 很耗时的操作
document.getElementById("btnConnect").value = "已连接";

执行的时候发现，按钮并没有改为“连接中”的状态，而是等Connect();执行完以后才快速改为“连接中”
弄了一下午很是郁闷，后来同学帮忙，提供一个方法，加上setTimeout，达到想要的效果。
代码如下


代码如下:

document.getElementById("btnConnect").value = "正在连接";
setTimeout("Connect()", 1);

然后把document.getElementById("btnConnect").value = "已连接";移到Connect()中。

赞 (0)

相关推荐

  • javascript延时重复执行函数 lLoopRun.js

    function lLoopRun(sFuncLoop,sFuncEnd,nDelay) { //writen by http://fengyan.iecn.cn //sFuncLoop >> 字符串型,需要重复执行的Javascript函数或语句(多个函数或语句请用;分隔) //sFuncEnd >> 字符串型,用于中止重复执行动作(sFuncLoop)的Javascript函数或语句 //nDelay >> 数字型,重复执行的时间间隔(毫秒数) var vinter

  • JavaScript延时效果比较不错的

    nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","

  • JS图片根据鼠标滚动延时加载的实例代码

    最近研究了京东商城用jQuery的实现如下:就是默认地址赋给img标签的src2属性,显示时赋给src属性值. 复制代码 代码如下: function lazyload(option) {    var settings = {defObj: null,defHeight: 0    };    settings = $.extend(settings, option || {});    var defHeight = settings.defHeight;    var defObj = (

  • 网页图片延时加载的js代码

    实现原理 把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片) 代码 lazyLoad=(function() { var map_element = {}; var el

  • javascript实现延时显示提示框特效代码

    本文实例讲述了JavaScript使用setTimeout实现延迟弹出警告框的方法.分享给大家供大家参考.具体如下: 先给大家展示一个延迟/定时/强制弹出窗口的JS代码 参数解释: 设置时间:Then.setTime(Then.getTime() + 1*60*60*1000) mylove/ttan.htm(过渡网页) ttan.htm中的 http://弹出网页/ 是要弹出的网页 scroll:1(滚动条) status:1(状态栏) help:1(帮助按钮) toolbar=1(工具栏)

  • JS延时提示框实现方法详解

    本文实例讲述了JS延时提示框实现方法.分享给大家供大家参考,具体如下: 提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失. 实现功能思路: 1.获取元素. 2.当鼠标指向Div1时,Div2显示. 3.当鼠标离开Div1时,使Div2延迟0.5秒消失,这样以便有时间把鼠标移到Div2. 4.当鼠标指向Div2时,Div2显示.因为第3步设置setTimeout使Div2消失,所以把用clearTimeout()把setTi

  • JS运行耗时操作的延时显示方法

    代码如下: 复制代码 代码如下: document.getElementById("btnConnect").value = "连接中"; Connect(); // 很耗时的操作 document.getElementById("btnConnect").value = "已连接"; 执行的时候发现,按钮并没有改为"连接中"的状态,而是等Connect();执行完以后才快速改为"连接中"

  • JS简单数组排序操作示例【sort方法】

    JS简单数组排序操作示例【sort方法】

    本文实例讲述了JS简单数组排序操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 数组排序</title> </head> <body> <script> window.onload = function()

  • JS实现点击循环切换显示内容的方法

    JS实现点击循环切换显示内容的方法

    本文实例讲述了JS实现点击循环切换显示内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击循环切换内容</title> <style> a { cursor: pointer; colo

  • JS实现点击链接切换显示隐藏内容的方法

    JS实现点击链接切换显示隐藏内容的方法

    本文实例讲述了JS实现点击链接切换显示隐藏内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer

  • js使用DOM操作实现简单留言板的方法

    js使用DOM操作实现简单留言板的方法

    本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素")  把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元

  • JS获取并操作iframe中元素的方法

    JS获取/设置iframe内对象元素.文档的几种方法 1.IE专用(通过frames索引形象定位): 复制代码 代码如下: document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过iframe名称形象定位): 复制代码 代码如下: document.frames['iframe的name'].document.getElementById('元素的ID'); 以上方法,不仅对iframe适用,对frameset里的frame也同

  • JS实现左右拖动改变内容显示区域大小的方法

    JS实现左右拖动改变内容显示区域大小的方法

    本文实例讲述了JS实现左右拖动改变内容显示区域大小的方法.分享给大家供大家参考.具体如下: 这里演示左右可拖动的内容显示区效果,左右拖动红条改变显示区域宽度大小,往左拖则全部显示右侧内容,往右拖则全部显示左则内容,类似QQ的聊天窗口一样,可以向上或向下拖动大小,以适合使用者的要求.本代码完全JavaScript与CSS代码结合实现,在各主流浏览器内运行的兼容性也不错,左右拖动改变大小的JS代码推荐给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

  • js实现浏览本地文件并显示扩展名的方法

    js实现浏览本地文件并显示扩展名的方法

    本文实例讲述了js实现浏览本地文件并显示扩展名的方法.分享给大家供大家参考.具体如下: 这里用文件域浏览指定文件,可以显示该文件的扩展名,想想它可以用在哪里?可以用在文件上传系统上,用来判断上传的文件类型是否是合法类型,不是则不允许上传.再看看代码,不足10行,解决问题,正在学习javaScript的朋友,你也可参考参考哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-view-nav-file-ext-codes/ 具体代码如下: <

  • 解决Vue.js由于延时显示了{{message}}引用界面的问题

    在使用Vue写应用时发现一个问题,每当进入一些有延时的(如网络API请求)操作时,会先闪一下未编译的 Mustache 标签{{ message }},这让人很不爽. 在官网找到了解决方案:v-cloak 参照官网做法: 定义[v-cloak]的style <style> [v-cloak] { display: none; } </style> 使用了Mustache标签的地方加上v-cloak <div v-cloak>{{ message }}</div&g

  • Angular.js中数组操作的方法教程

    前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家介绍关于Angular.js中数组操作的相关资料,话不多说了,来一起看看详细的介绍. 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码":true|false",使用逗号隔开,可以

随机推荐