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

by admin on 2019年9月6日

思路:当客商划过 设置变量i=0;
每过100毫秒 i++
当i==10的时候就刚好 是1秒。就接触事件。
   不然用清楚setInterval i不在++;
哈哈。不了然自家叙述清楚没。
代码:

近期因专门的职业的急需珍视做web前段的优化,在这之中之一正是js的优化,在项目中的js代码绝相比较正规的,都以$(function(){})这种格式。可是我们都掌握js的下载相比耗费时间的,它的分析和实行是阻塞式的。大家是还是不是足以先让js下载下来,在windows的load事件中在去分析和施行了。答案是束手就擒的,在那之中ControlJS
.js就完结了这种办法。个人感觉它比LAB的延迟加载要美观的一些,收缩了js的加载时间。可是该js成效相对相比强硬,同有时间也没有消除js注重关系的加载。个人自个儿写了一个小插件
来兑现js异步加载延迟试行。

诚如在JS页面延迟实施一些方法。可以运用以下的主意
jQuery.delay()方法简单介绍

jQuery中queue和dequeue的用法
//www.jb51.net/article/25481.htm
Window.setTimeout
//www.jb51.net/article/20741.htm
以下是自家动用的有的事例。

相似在JS页面延迟实施一些措施。能够行使以下的办法
jQuery.delay()方法简单介绍

jQuery中queue和dequeue的用法

Window.setTimeout

以下是自家动用的有的例证。

复制代码 代码如下:

代码如下:

复制代码 代码如下:

复制代码 代码如下:

var delay=function(t,fn){
var i=0,
j=10,
t=(t*1000)/j,
//把延迟时间平均分为10等份
_this=this,
//消除this绑定难点,所以调用delay函数的时候,请管理好this指向自家对象
d=setInterval(function(){
i++;
if(i==j){
clearInterval(d);
fn.apply(_this);
};
},t);
_this.onmouseout=function(){
clearInterval(d);
};
}

 

//延迟查询,传贰个查询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();
}

//延迟查询,传三个询问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();
}

测量检验代码:

[javascript]
(function () {
    var document = window.document;
    var getAttribute = function (elem, name) {
        var attrs = elem.attributes;
        var len = attrs.length;
        for (var i = 0; i < len; i++) {
            var attr = attrs[i];
            if (name === attr.nodeName) {
                return attr.nodeValue;
            }
        }
 
        return undefined;
    };
 
    var scriptstbData;
    var orders = [];
    var findScripts = function () {
        var aScripts = document.getElementsByTagName(‘script’);
        var len = aScripts.length;
        var scriptsArr = [];
        var scriptsSrc = [];
 
        for (var i = 0; i < len; i++) {
            var script = aScripts[i];
            if (“text/asynjs” === getAttribute(script, “type”) &&
“undefined” === typeof (script.founded)) {
                script.founded = true;
                var order = getAttribute(script, “order”) ||
getAttribute(script, “data-order”) || 0;
                script.order = order;
                if (orders.indexOf(order) < 0) {
                    orders.push(order);
                }
                var src = getAttribute(script, “asynsrc”) ||
getAttribute(script, “data-asynsrc”);
                script.src = src;
                if (src && scriptsSrc.indexOf(src) < 0) {
                    scriptsArr.push(script);
                }
            }
 
        }
        orders.sort(function compare(a, b) { return a – b; });
        return scriptsData = scriptsArr;
    };
    var downloadScripts = function (scriptArr) {
        var scripts = scriptArr || findScripts();
        var len = scripts.length;
 
        for (var i = 0; i < len; i++) {
            var img = new Image();
            img.src = scripts[i].src;
            img.style.display = “none”;
        }
    };
 
    var processScripts = function (scriptArr) {
        var scripts = (scriptArr && scriptArr.constructor === Array) ?
scriptArr : scriptsData;
        var len = scripts.length;
        var failscripts = [];
        var wdata = [];
        for (var i = orders.length – 1; i >= 0; i–) {
            var order = orders[i];
            var urls = [];
            var fns = [];
            for (var j = 0, len = scripts.length; j < len; j++) {
                var script = scripts[j];
                if (script.order == order) {
                    urls.push(script.src);
                }
            }
            if (i == orders.length – 1) {
                wdata[order] = processScript(urls)
            }
            else {
                var nextorder = orders[i + 1];
                fns.push(wdata[nextorder]);
                wdata[order] = processScript(urls, fns);
            }
        }
        var exorder = orders[0]
        wdata[orders[0]]();
    };
    var processScript = function (urls, fn) {
        return function () {
            for (var i = 0; i < urls.length; i++) {
                var se = document.createElement(‘script’);
                if (fn && fn[i]) {
                    se.onload = se.onreadystatechange = fn[i];
                }
                se.src = urls[i];
                var s1 = document.getElementsByTagName(‘script’)[0];
                s1.parentNode.insertBefore(se, s1);
            }
        }
    }
 
    if (document.addEventListener) {
        document.addEventListener(“DOMContentLoaded”, function () {
downloadScripts(); }, false);
        window.addEventListener(“load”, function () {
setTimeout(processScripts, 0); }, false);
 
    } else if (document.attachEvent) {
 
        document.attachEvent(“onreadystatechange”, function () {
downloadScripts(); });
        window.attachEvent(“onload”, function () {
setTimeout(processScripts, 0); });
    }
 
})();
(function () {
    var document = window.document;
    var getAttribute = function (elem, name) {
        var attrs = elem.attributes;
        var len = attrs.lengthtb;
        for (var i = 0; i < len; i++) {
            var attr = attrs[i];
            if (name === attr.nodeName) {
                return attr.nodeValue;
            }
        }

概念遮罩层,相隔一分钟后关门

概念遮罩层,相隔一分钟后关门

那是一个测量试验DIV 把鼠标放在下面2秒后会弹出他的ID

        return undefined;
    };

复制代码 代码如下:

复制代码 代码如下:

[Ctrl+A 全选 注:如需引入外界Js需刷新才干进行]

    var scriptsData;
    var orders = [];
    var findScripts = function () {
        var aScripts = document.getElementsByTagName(‘script’);
        var len = aScripts.length;
        var scriptsArr = [];
        var scriptsSrc = [];

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 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();
}

设置变量i=0; 每过100微秒 i++
当i==10的时候就刚好 是1秒。就接触事件。 不然用清楚setInterval i不在++;
哈哈。不掌握自家描…

        for (var i = 0; i < len; i++) {
            var script = aScripts[i];
            if (“text/asynjs” === getAttribute(script, “type”) &&
“undefined” === typeof (script.founded)) {
                script.founded = true;
                var order = getAttribute(script, “order”) ||
getAttribute(script, “data-order”) || 0;
                script.order = order;
                if (orders.indexOf(order) < 0) {
                    orders.push(order);
                }
                var src = getAttribute(script, “asynsrc”) ||
getAttribute(script, “data-asynsrc”);
                script.src = src;
                if (src && scriptsSrc.indexOf(src) < 0) {
                    scriptsArr.push(script);
                }
            }

倒计时

倒计时

        }
        orders.sort(function compare(a, b) { return a – b; });
        return scriptsData = scriptsArr;
    };
    var downloadScripts = function (scriptArr) {
        var scripts = scriptArr || findScripts();
        var len = scripts.length;

复制代码 代码如下:

复制代码 代码如下:

        for (var i = 0; i < len; i++) {
            var img = new Image();
            img.src = scripts[i].src;
            img.style.display = “none”;
        }
    };

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);
}
}

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);
}
}

    var processScripts = function (scriptArr) {
        var scripts = (scriptArr && scriptArr.constructor === Array) ?
scriptArr : scriptsData;
        var len = scripts.length;
        var failscripts = [];
        var wdata = [];
        for (var i = orders.length – 1; i >= 0; i–) {
            var order = orders[i];
            var urls = [];
            var fns = [];
            for (var j = 0, len = scripts.length; j < len; j++) {
                var script = scripts[j];
                if (script.order == order) {
                    urls.push(script.src);
                }
            }
            if (i == orders.length – 1) {
                wdata[order] = processScript(urls)
            }
            else {
                var nextorder = orders[i + 1];
                fns.push(wdata[nextorder]);
                wdata[order] = processScript(urls, fns);
            }
        }
        var exorder = orders[0]
        wdata[orders[0]]();
    };
    var processScript = function (urls, fn) {
        return function () {
            for (var i = 0; i < urls.length; i++) {
                var se = document.createElement(‘script’);
                if (fn && fn[i]) {
                    se.onload = se.onreadystatechange = fn[i];
                }
                se.src = urls[i];
                var s1 = document.getElementsByTagName(‘script’)[0];
                s1.parentNode.insertBefore(se, s1);
            }
        }
    }

你也许感兴趣的篇章:

  • 基于JavaScript完结自然时间后去推行三个函数
  • js的推迟试行难题深入分析
  • 浅谈js中的延迟施行和定期实施
  • js查看三个函数的推行时间实例代码
  • js代码延迟一定期间后进行二个函数的实例

jQuery.delay()方法简单介绍
jQuery中queue和dequeue的用法 htt…

    if (document.addEventListener) {
        document.addEventListener(“DOMContentLoaded”, function () {
downloadScripts(); }, false);
        window.addEventListener(“load”, function () {
setTimeout(processScripts, 0); }, false);

    } else if (document.attachEvent) {

        document.attachEvent(“onreadystatechange”, function () {
downloadScripts(); });
        window.attachEvent(“onload”, function () {
setTimeout(processScripts, 0); });
    }

})();调用代码:

[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <title>test</title>
    <script type=”text/javascript”
src=”Scripts/asynload.js”></script>
</head>
<body>
    <div id=”container”>
        <img src=”images/bmw_m1_hood.jpg” width=”765″ height=”574″
alt=”BMW M1 Hood”>
 
        <script type=”text/asynjs” order=”3″
asynsrc=”test.js”></script>
        <script type=”text/asynjs” order=”1″
asynsrc=”Scripts/jquery-1.7.2.js”></script>
        <script type=”text/asynjs” order=”2″
asynsrc=”Scripts/jquery.lazyload.js”></script>
 
        <img src=”images/bmw_m1_side.jpg” width=”765″ height=”574″
alt=”BMW M1 Side” />
        <img data-original=”images/viper_1.jpg” width=”765″
height=”574″ alt=”Viper 1″ />
        <img data-original=”images/viper_corner.jpg” width=”765″
height=”574″ alt=”Viper Corner” />
        <img data-original=”images/bmw_m3_gt.jpg” width=”765″
height=”574″ alt=”BMW M3 GT” />
        <img data-original=”images/corvette_pitstop.jpg” width=”765″
height=”574″ alt=”Corvette Pitstop” />
    </div>
</body>
</html>
 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <title>test</title>
    <script type=”text/javascript”
src=”Scripts/asynload.js”></script>
</head>
<body>
    <div id=”container”>
        <img src=”images/bmw_m1_hood.jpg” width=”765″ height=”574″
alt=”BMW M1 Hood”>

        <script type=”text/asynjs” order=”3″
asynsrc=”test.js”></script>
        <script type=”text/asynjs” order=”1″
asynsrc=”Scripts/jquery-1.7.2.js”></script>
        <script type=”text/asynjs” order=”2″
asynsrc=”Scripts/jquery.lazyload.js”></script>

        <img src=”images/bmw_m1_side.jpg” width=”765″ height=”574″
alt=”BMW M1 Side” />
        <img data-original=”images/viper_1.jpg” width=”765″
height=”574″ alt=”Viper 1″ />
        <img data-original=”images/viper_corner.jpg” width=”765″
height=”574″ alt=”Viper Corner” />
        <img data-original=”images/bmw_m3_gt.jpg” width=”765″
height=”574″ alt=”BMW M3 GT” />
        <img data-original=”images/corvette_pitstop.jpg” width=”765″
height=”574″ alt=”Corvette Pitstop” />
    </div>
</body>
</html>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图