如何知道 window 的 load 事件已经触发

背景

为了使页面加载更快,常常将一些不重要的第三方脚本在页面完成加载后进行懒加载。

// 做一些不影响业务的事情
window.addEventListener('load', () => {
  // 懒加载埋点分析
  loadScript({
    url: 'https://www.domain.com/test.js',
    timeout: 10000
  }).then(() => {
    console.log('ok');
  }).catch(console.error);
  // 其他
  // ...
});

"如何知道 window 的 load 事件已经触发"继续阅读

讲讲 Promise

一、什么是 Promise

1.1 Promise 的前世今生

Promise 最早出现在 1988 年,由 Barbara LiskovLiuba Shrira 首创(论文:Promises: Linguistic Support for Efficient Asynchronous Procedure Calls in Distributed Systems)。并且在语言 MultiLispConcurrent Prolog 中已经有了类似的实现。

JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:QWhenBluebird

// Q / 2010
import Q from 'q'

function wantOdd () {
    const defer = Q.defer()
    const num = Math.floor(Math.random() * 10)
    if (num % 2) {
        defer.resolve(num)
    } else {
        defer.reject(num)
    }
    return defer.promise
}

wantOdd()
    .then(num => {
        log(`Success: ${num} is odd.`) // Success: 7 is odd.
    })
    .catch(num => {
        log(`Fail: ${num} is not odd.`)
    })

由于 jQuery 并没有严格按照规范来制定接口,促使了官方对 Promise 的实现标准进行了一系列重要的澄清,该实现规范被命名为 Promise/A+。后来 ES6(也叫 ES2015,2015 年 6 月正式发布)也在 Promise/A+ 的标准上官方实现了一个 Promise 接口。

new Promise( function(resolve, reject) {...} /* 执行器 */  );

想要实现一个 Promise,必须要遵循如下规则:

  1. Promise 是一个提供符合标准then() 方法的对象。
  2. 初始状态是 pending,能够转换成 fulfilledrejected 状态。
  3. 一旦 fulfilledrejected 状态确定,再也不能转换成其他状态。
  4. 一旦状态确定,必须要返回一个值,并且这个值是不可修改的。

"讲讲 Promise"继续阅读

jQuery AJAX 遮罩实例

function transferip()
{
    var site_list=$("textarea[name='Oldsite']").val();
    var ip_list=$("textarea[name='Oldip']").val();
    var ip_new=$("input[name='Newip']").val();
    if(ip_list==""||ip_new=="")
    {
        alert('IT CANNOT BE EMPTY!');
        return false;
    }
    ajaxStar("LOADING...");
    $.ajax(
    {
        type:"post",
        url:"transip.mazey",
        data:{"search":"check_ip","ip_list":escape(ip_list),"ip_new":ip_new,"site_list":escape(site_list)},
        error:function(){
            ajaxClose();
            alert("SYSTEM ERROR!");
        },
        success:function(msg)
        {
            ajaxClose();
            var msgArr=msg.split("-|-")
            if(msgArr[0]=="413")
            {
                alert(msgArr[1]);
            }
            else
            {
                alert(msgArr[1]);
            }

        }
    }
    )
}

/**div加载ajax效果***/
function ajaxStar(str,e){//str提示信息  e:iframe框访
    var html="";
    html+="<div id='ajaxLoadDiv'></div>";
    html+="<div class='ajaxLoadIcon'>";
    html+= "<span class='ajaxIcon'></span>";
    if(str)
        html+="<span class='ajaxInfo'>"+str+"</span>";
    html+="</div>";
    $("body").append(html);    
    var divH=$(document).height();//-$("#admin_topbj").height();
    $("#ajaxLoadDiv").css({"height":divH,"top":0,"opacity":0.5});
    var iconTop=$(window).height()/2;
    iconTop=iconTop+$(document).scrollTop();
    $(".ajaxLoadIcon").css({"top":iconTop+"px"});
}

/****关闭ajax遮罩*****/
function ajaxClose(){    
    $("#ajaxLoadDiv").remove();
    $(".ajaxLoadIcon").remove();    
}

function look_seven(){
    window.location.href="/Setinmanager/winhost/migratejob/record.asp";
}

图片:overlay.png

图片:ajaxLoad.gif

jQuery AJAX 同步和异步的区别

function paginationGo(page){
    sendata = {"page":page};
    $.ajax({
        type:"POST",
        url:"newqc1.asp",
        async:true,
        timeout:10000,
        data:sendata,
        success:function(data){
            //alert(data+"aa");
            $("#qc01").html(data);
        },
        error:function(data){
            alert("连接服务器失败!");
        }
    });
}

当异步关了的时候(同步),即 async: false,传输数据的时候页面会假死,即不可进行其他操作。