JavaScript小工具(一)

发布日期:2017-05-31 阅读量:430

1、浏览器识别

// 获取浏览器用户代理
var ua = window.navigator.userAgent.toLowerCase();
// 微信浏览器
ua.match(/MicroMessenger/i) == 'micromessenger'
// 安卓
ua.indexOf('Android') > -1 || u.indexOf('Linux') > -1
// iOS
!!ua.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)

2、防抖

/**
 * 防抖
 * 原理:不管触发多少次事件,都会等到事件触发 n 秒后 才会执行,如果在事件触发的 n 秒内 又触发了这个事件,那么就以新的事件的时间为准重新计算
 * 场景:表单提交,实时搜索
 * @param funtion fn 要执行的方法
 * @param int wait 间歇时间
 */
function debounce(fn, wait)
{
    // 定时器初始化
    let timer = null;
    // 闭包
    return funtion() {
        if (timer) { // 如果存在定时器则清除重新计时
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, wait);
    }
}

3、节流

/**
 * 节流
 * 原理:将用户频繁操作转换为每间隔一段时间执行
 * 场景:滚动加载
 * @param function fn 执行函数
 * @param int delay 间隔时间
 */
 function throttle(fn, delay, args)
 {
     var prev = Date.now();
     return function() {
        var context = this;   //this指向window
        var now = Date.now();
        if (now - prev >= delay) {
            fn.apply(context, args);
            prev = Date.now();
        }
    }
 }