函数防抖原理

函数防抖

定义: 函数防抖就是在一段时间触发或调用函数时,只执行一次; 也可以理解为触发n毫秒之后才会调用一次

优点: 优化系统性能

test.js:

const lodash = require('lodash')
// lodash的debounce方法返回值是一个函数
const fn = lodash.debounce({
console.log('hello')
}, 1000)
fn()

运行结果:

说明: 我们发现执行文件1秒钟后,打印了"hello"; 然后同学会人认为这不就是定时器么~

其实,跟定时器还有点区别,进一步验证
下面我们讲文件做一些修改:
test.js:

const lodash = require('lodash')
// lodash的debounce的返回值是个函数
const fn = lodash.debounce({
console.log('hello')
}, 1000)

for (let i=0; i<100; i++) {
	fn()
}

从代码上看,我们循环调用100次fn函数,所以应该打印100个"hello",但是运行结果显示:

说明: fn函数就执行了一次,打印了一次"hello"

项目应用场景:
监听页面向上滚出的距离,提高系统性能

// 引入lodash并解构出debounce方法
import { debounce } from 'lodash'
// 小程序页面的生命周期函数,当页面滚动的时候才会触发执行
onPageScroll = debounce (function (e) {
if (e.scrollTop > 100) {
	// 执行代码,这里是Totop按钮显示
	this.seen = true
	} else {
	// Totop按钮隐藏
	this.seen = false
	}
	this.$apply()
}, 300)

函数防抖原理:

function debounce (callback, time) {
	var timeId
	return function () {
		clearTimeout(timeId)
		timer = setTimeout(function () {
			callback()
		}, time)
	}
}
var fn = debounce(function(){
	console.log(111)
}, 1000)

// 调用
for (var i=0; i>100; i++) {
	fn()
}

运行结果:

可见,效果跟debounce是一样的,这就是函数防抖原理