前端js常用优化

事件委托

document.getElementById('ul').onclick = function(event) {
    var event = event || window.event;
    var target = event.target || event.srcElement;
    if (target.nodeName.toLowerCase() == 'li') {
        alert(target.innerHTML);
    }
}

节流

// 节流，每隔一段时间执行一次
function throttle(fn, delay) {
    var ctx;
    var args;
    // 记录上次触发事件
    var previous = Date.now();
    var later = function() {
        fn.apply(ctx, args);
    };
    return function() {
        ctx = this;
        args = arguments;
        var now = Date.now();
        // 本次事件触发与上一次的时间比较
        var diff = now - previous - delay;
        // 如果隔间时间超过设定时间，即再次设置事件触发的定时器
        if (diff >= 0) {
            // 更新最近事件触发的时间
            previous = now;
            setTimeout(later, delay);
        }
    };
}

防抖

// 防抖，只执行最后一次
function debounce(fn, delay, isImmediate) {
    var timer = null; //初始化timer，作为计时清除依据
    return function() {
        var context = this; //获取函数所在作用域this
        var args = arguments; //取得传入参数
        clearTimeout(timer);
        if (isImmediate && timer === null) {
            //时间间隔外立即执行
            fn.apply(context, args);
            timer = 0;
            return;
        }
        timer = setTimeout(function() {
            fn.apply(context, args);
            timer = null;
        }, delay);
    }
}