JS页面延迟执行一些方法(整理)

一般在JS页面延迟执行一些方法。可以使用以下的方法
jQuery.delay()方法简介
http://shawphy.com/2010/11/jquery-delay.html
jQuery中queue和dequeue的用法
http://www.jb51.net/article/25481.htm
Window.setTimeout
http://www.jb51.net/article/20741.htm
以下是我用到的一些例子。


代码如下:

//延迟查询，传一个查询btn的ID，然后根据它附近的FORM绑定，当FORM里面的控件被触发或被输入了就会500毫秒后模拟点击查询按钮
var timeout;
function searchTrigerInit(btnId){
var $form = $("#"+btnId).closest("form");
$form.find("input").not(".search_onblur").keyup(function(){
searchTriger(btnId);
});
$form.find("input.search_onblur").blur(function(){
searchTriger(btnId);
});
$form.find("input[type=checkbox]").change(function(){
searchTriger(btnId);
});
$form.find("select").change(function(){
searchTriger(btnId);
});
}
function searchTriger(btnId){
if(timeout != null){
clearTimeout(timeout);
}
timeout = setTimeout("searchBtnClick('"+btnId+"')",500);
}
function searchBtnClick(btnId){
$("#"+btnId).click();
}

定义遮罩层，相隔一分钟后关闭


代码如下:

var hideTimeout;
function showLayerMask(){
$layerMask = $(".layerMask");
if($layerMask.length == 0){
var div = "";
var width = document.body.clientWidth;
var Height = document.body.scrollHeight;
var img = "<img src='"+resourcePath+"/src/images/loading2.gif' />";
div += "<div class='layerMask' style='width:100%;height:" + Height + "px;'>";
div += img;
div += "</div>";
var $body = $("body");
$body.prepend(div);
}
$layerMask.show();
//1分钟后取消
hideTimeout = setTimeout(hideLayerMask,60000);
}
function hideLayerMask(){
if(hideTimeout != null){
clearTimeout(hideTimeout);
}
$layerMask = $(".layerMask");
$layerMask.hide();
}

倒计时


代码如下:

var emailTime = 30;
function nextCanDo(){
$("#mailValidateCodeBtn").val(emailTime+"秒");
emailTime -= 1;
if(emailTime ==0 ){
$("#mailValidateCodeBtn").val("重新获取验证码");
$("#mailValidateCodeBtn").attr("disabled",false);
emailTime = 30;
}else{
setTimeout("nextCanDo()",1000);
}
}

赞 (0)

相关推荐

  • 浅谈js中的延迟执行和定时执行

    在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下: function testFunction(){Console.log('hovertree.com');} setTimeout("testFunction()","6000"); //6000毫秒后执行testFunction()函数,只执行一次. setInterval("testFunction()","6000");//每隔600

  • js的延迟执行问题分析

    看这段代码: <body> <script src="deffer.js"></script> content </body> deffer.js的内容为: alert(1) 这样在alert窗口没有被关闭之前,页面都会是一片空白.因为alert窗口阻止了页面的继续渲染. 为了避免此类问题,html规范里定义了deffer和async属性,这两个属性的具体定义这里不讨论,反正他们都是用来告诉浏览器,一定要在页面渲染完成以后再执行本脚本的内

  • js查看一个函数的执行时间实例代码

    js查看一个函数的执行时间实例代码

    具体不多说了,请看下文代码实例讲解 如下有一个求和的函数,我们要知道这个函数执行需要的时间 function add(){ var sum = 0 ; for(var i = 0;i<1000000;i++){ sum += i; } return sum; } 定义一个测试函数,将待测函数作为参数传入 function test(func){ var start = new Date().getTime();//起始时间 func();//执行待测函数 var end = new Date()

  • js代码延迟一定时间后执行一个函数的实例

    实例如下: setTimeout(funcName,500); function funcName() { xxxxxx; } 0.5秒后执行funcName(),只执行一次 setInterval(funcName,5000);   每隔5秒执行一次funcName() 以上这篇js代码延迟一定时间后执行一个函数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 基于JavaScript实现一定时间后去执行一个函数

    在实际需要中可能需要规定在指定的时间之后再去执行一个函数以达成期望的目的,这也就是一个定时器效果,恰好在js中就已经给定了这样的一个函数setTimeout(),下面先介绍一下次函数的 用法: 语法:  复制代码 代码如下: setTimeout(code,interval) 此函数能够规定在指定的在指定的事件之后去执行一段指定代码,此代码只执行一次. setTimeout()函数具有两个参数,第一个参数规定要执行的执行代码,第二个参数规定在多长时间后去执行代码,单位是毫秒. 代码实例: <!D

  • JS页面延迟执行一些方法(整理)

    一般在JS页面延迟执行一些方法.可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中queue和dequeue的用法 http://www.jb51.net/article/25481.htm Window.setTimeout http://www.jb51.net/article/20741.htm以下是我用到的一些例子. 复制代码 代码如下: //延迟查询,传一个查询btn的ID,

  • C#实现程序等待延迟执行的方法

    本文实例讲述了C#实现程序等待延迟执行的方法.分享给大家供大家参考.具体如下: [System.Runtime.InteropServices.DllImport("kernel32.dll")] static extern uint GetTickCount(); /// <summary> /// 程序等待延迟执行 /// </summary> /// <param name="ms"></param> stati

  • JS 跳转页面延迟2种方法

    方法1: 复制代码 代码如下: <SPAN style="FONT-SIZE: 12px"><script type="text/javascript"> <!-- function go(t,url){ //t设置跳转时间:秒 //url设置跳转网址 document.write("<div id=text>本页将在<strong id='tt'></strong>后,跳转至:<sp

  • Javascript延迟执行实现方法(setTimeout)

    1.延迟切换tab 需求:页面上有几个tab,切换tab的时候,会对某个特定区域的数据进行拉取更新. 弊端:用户从第一个tab切换一直快速切到尾,就会产生n个ajax请求.其实用户只是需要看到最后一个tab的数据. 复制代码 代码如下: var changeTab = function(){ var timeId = 0; return function(tabId){ if(timeId){ clearTimeout(timeId); timeId=0; } setTimeout(functi

  • js页面跳转的常用方法整理

    复制代码 代码如下: <!--脚本开始--> <script language="javascript" type=""> function countDown(secs){ tiao.innerText=secs; if(--secs>0) setTimeout("countDown("+secs+")",1000); } countDown(3); </script> <!-

  • JS 事件延迟执行说明分析

    思路:当用户划过 设置变量i=0; 每过100毫秒 i++ 当i==10的时候就刚好 是1秒.就触发事件. 否则用清楚setInterval i不在++: 哈哈.不知道我描述清楚没. 代码: 复制代码 代码如下: var delay=function(t,fn){ var i=0, j=10, t=(t*1000)/j, //把延迟时间平均分成10等份 _this=this, //解决this绑定问题,所以调用delay函数的时候,请处理好this指向本身对象 d=setInterval(fun

  • 浅谈Vue.js 关于页面加载完成后执行一个方法的问题

    首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况. 解决思路: 1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签. 2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数. 方法1案例:tab页里的子页面如果没有内容就隐藏 父页面代码 <e

  • 页面加载完后自动执行一个方法的js代码

    1.在body中用onload: <body onload="myfunction()"> 2.在脚本中用window.onload: <script type="text/javascript"> function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ window.onload=myfun;//不要括号 </scr

  • 详解Vue.js在页面加载时执行某个方法

    jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 总结 以上所述是小编给大家介绍的Vue.js在页面加载时执行某个方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

随机推荐