防抖节流

Posted 2022-06-09 不想掉头发啊！！

1.防抖

1.1原理

尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行!

1.2封装代码

function debounce(fn, wait) 
		// 定义一个变量来保存定时器
        var time
        // 可能函数会有返回值，因此定义一个变量来返回
        var result
        // 返回一个函数
        return function () 
           // 定义一个变量来保存this,防止this指向不正确
            var context = this
            // 定义变量保存参数
            var args = arguments
            // 存在则清除定时器，让其不执行
            clearTimeout(time)
            // 不存在则执行
            time = setTimeout(function ()
                // 绑定this,传入参数
                result = fn.call(context, args)
            , wait)
            return result
        
    

2.节流

2.1原理

持续触发事件，每隔一段时间，只执行一次事件

1.2封装代码

	/*
       思路：使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，
        如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。
     */
     function throttle(fn, wait)
        let previous = 0
        // 定义一个变量来保存this,防止this指向不正确
        var context
        // 定义变量保存参数
        var args
        return function () 
            // 获取当前的时间戳
            let nowTime = +new Date()
            context = this
            args = arguments
            // 当前的时间戳减去之前的时间戳的值大于设定的wait时间间隔，则执行，否则不执行
            if(nowTime - previous > wait)
                fn.apply(context, args)
                // 更新时间戳
                previous = nowTime
            
        

    

	/*
	当触发事件的时候，我们设置一个定时器，再触发事件的时候，
	如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。
	*/
	function throttle(func, wait) 
	    var timeout;
	    var previous = 0;
	
	    return function() 
	        context = this;
	        args = arguments;
	        if (!timeout) 
	            timeout = setTimeout(function()
	                timeout = null;
	                func.apply(context, args)
	            , wait)