[JS] 函数防抖与节流

函数的防抖与节流

概述

有些场景会频繁的触发事件，比如说搜索框实时的发出请求，onscroll，resize，onmousemove等，但是我们并不像如此频繁的触发事件，这时候就要用到防抖和节流了

	function handler() {
		console.log(document.body.scrollTop)
	}
	window.addEventListener('scroll', handler)

在上面的代码中，我们每滚动一次，handler就会执行很多次，我们需要使用防抖与节流来限制事件平凡的触发

函数的防抖

一定时间内频繁的触发某一个事件，只执行最后一次。

	function debounce(fn, wait, immidiate) {
		var timeout
		return function () {
			var ctx = this,
				args = [].slice.call(arguments)
				
			if(timeout) clearTimeout(timeout)
			if(immidiate) {
				var callNow = !timeout
				timeout = setTimeout(()=>{
					timeout = null
				}, wait)
				if(callNow) fn.apply(ctx, args)
			} else {
				timeout = setTimeout(()=>{
					fn.apply(ctx, args)
				}, wait)
			}
		}
	}

函数的节流

函数的节流指的是在一段时间间隔内，某个函数只能执行一次

节流有两种实现方式，一种是是基于时间戳实现的，一种是基于定时器实现的

1. 时间戳版：

	function throttle(fn, wait) {
		var start = Date.now(),
			
		return function () {
			var ctx = this,
				args = [].slice.call(arguments),
				current = Date.now()
	
				if(current - start >= wait) {
					fn.apply(ctx, args)
					start = current
				}
		}
	}

2. 定时器版：

function throttle(fn, wait) {
	var timeout
		
	return function () {
		var ctx = this,
			args = [].slice.call(arguments),
				
			if(!timeout) {
				timeout = setTimeout(()=>{
					timeout = null
					fn.apply(ctx, args)				
				})
			}
	}
}