极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件

极简实现系列——手写防抖的debounce函数

极简实现系列——手写bind

极简实现系列——超低配版Promise

极简实现系列——手写call和apply

极简实现系列——手写eventBus

极简实现系列——手写new

---

节流函数在日常中还是经常用到的，比如在页面滚动的时候调用函数，要是不做节流的话，就会一直调用，造成性能浪费。实现的原理也非常简单，一般有两种方式，我们先来说下第一种：

一：利用定时器

原理：定义一个开关变量flag，调用的时候把它赋值为true，然后再写一个定时器，待定时器结束后再赋值为false。 再定时器还未结束期间，再次调用函数时判定flag，为true的话直接return就行

知道原理后我们先随便写一个极简版

let timer = null let flag = false function throttle(fn, delay){ if(flag) return // true 表示上次执行未结束 flag = true timer = setTimeout(() => { fn() flag = false // 结束后重新设置为false }, delay) } // 测试函数 function test() { console.log('test') } window.onscroll = function(e) { // test() // 不用节流的话，页面滚动一直在调用 throttle(test, 1000) // 加上节流，即使页面一直滚动，也只会每隔一秒执行一次test函数 }

完事了~

当然这些是比较粗暴的，功能也有一些限制，比如我希望test函数可以传参数。我们再来优化一下

优化版

function throttle(fn, delay){ let timer = null // 把变量放函数里面，避免全局污染 let flag = false let that = this return function() { if(flag) return flag = true let arg = arguments // 此处为fn函数的参数 timer = setTimeout(() => { fn.apply(that, arg) flag = false }, delay) } } function test(a,b) { console.log(a,b) } let throttleTest = throttle(test, 1000) window.onscroll = function(e) { throttleTest(1,2) }

二：利用时间戳

原理：获取调用函数时的时间戳，计算前后两次调用的时间戳之差，如果大于设定的时间则继续，否则return

很简单，直接看代码吧

 

function throttle(fn, delay){ let that = this let lastTime = 0 return function() { let nowTime = new Date().getTime() if(nowTime - lastTime < delay) return // 两次时间间隔比设定的delay则return let arg = arguments // 此处为fn函数的参数 fn.apply(that, arg) lastTime = nowTime // 把当前时间赋值给lastTime } } function test(a,b) { console.log(a,b) } let throttleTest = throttle(test, 1000, true) window.onscroll = function(e) { throttleTest(1,2) }

完事~