实现手写防抖和节流

实现手写防抖和节流

防抖

原理：事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间，当预定的时间内没有再次调用该函数，则执行响应函数

//防抖
function debounce(func, wait, immediate){
    //设置定时器名字
    var timeout;
    return function() {
        //保存调用该函数的对象
        var _that = this;
        //保存函数事件
        var args = arguments;
        if(timeout) clearTimeout(timeout);
        if(immediate){
            var callnow = !timeout;
            timeout = setTimeout(function() {
                timeout= null
			},wait);
            if(callnow) func.apply(_that, args)
		}else{
           	timeout = setTimeout(function() {
                func.apply(_that, args)
			},wait) 
		}
	}
}

防抖函数的应用场景：

​ 1、scroll事件滚动触发

​ 2、搜索框输入查询

​ 3、表单查询

​ 4、按钮提交事件

​ 5、浏览器窗口缩放、resize事件

节流

原理：如果你持续触发事件，每隔一段时间只执行一次事件

第一次不会输出，最后一次会再次被调用：leading:false,trailing:true;

第一次会输出，最后一次不会再次被调用：leading:true(),trailing:false; （默认值）

第一次会输出，最后一次也会再次被调用：leading:true,trailing:true;

function throttle(func, wait, options){
    var timeout, _that, args;
    var old = 0;
    //封装成一个函数
    var later = function() {
        old = new Date().valueOf();
        timeout = null;
        func.apply(_that, args);
	}
    return function() {
        _that = this;
        args = arguments;
        var now = new Date().valueOf();
        if(!options) options = {};
        if(options.leading === false && !old){
            old = now
		}
        if(now - old > wait){
            //连续点击时要将之前的定时器清除
            if(timeout){
                clearTimeout(timeout);
                timeout = null;
			}
            //立即调用节流函数
            func.apply(_that, args);
            //将现在的时间更新为旧时间
           	old = now;
		}
        if(!timeout && options.trailing !== false){
            //最后一次执行
            timeout = setTimeout(later,wait);
		}
	}
}

节流函数的应用场景：
1、DOM元素拖拽功能实现

​ 2、射击游戏

​ 3、计算鼠标移动距离

​ 4、监听scroll滚动事件