JavaScript _ 函数节流和防抖

本文主要是介绍JavaScript _ 函数节流和防抖，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

函数节流和防抖
+ 两种处理 重复高频触发 事件的方式

节流 
+ 在 单位时间 内只能 触发一次  => 开关思想
 防 抖 
+ 在 单位时间 内, 如果重复出现同样的事件, 那么把前一次干掉

<input type="text">

  <script>
    const inp = document.querySelector('input')

    inp.oninput = function () {
      console.log(`我要搜索的内容是: ${ this.value }`)
    }
  </script>

重复高频触发事件 : 额外浪费浏览器性能  ( 触发了 11 次 事件 )

 函数节流 

        + 在固定范围内只执行一次事件         + 用在一个异步的时候, 并且两个异步的事情不可以同时触发         + 在一个固定时间段内, 多次触发事件的时候, 只执行第一次

<input type="text">

<script>
	const inp = document.querySelector('input')

	// 1. 函数节流
	// 准备节流开关 ( 节流阀 )
	// 开关为 true 的时候, 表示可以执行
	// 开关为 false 的时候, 表示不可以执行
	let flag = true

	inp.oninput = function() {
		// 这个事件内的代码是否执行, 取决于 节流开关
		if (!flag) return

		// 代码能执行到这里, 说明开关是开着的
		flag = false

		console.log(`我要搜索的内容是: ${ this.value }`, new Date().getTime())

		// 设置单位时间以后, 讲开关打开
		setTimeout(() => flag = true, 500)
	}
</script>

函数节流之后只 触发了 4 次 事件 , 节约了浏览器 7 次 的操作性能 ( 7次 请求 , 7次 渲染页面 )

  函数防抖  ( 应用较多 )

瀑布流 或者 下拉加载 等等...都经常会使用

        + 在固定时间内 , 只触发事件一次         + 每一次触发事件的时候 , 都会从新计时开始         + 例子: 我规定 500ms 你不输入内容 , 那么就触发事件           => 第一次输入内容 h , 延迟 500ms 以后在触发           => 当我在 260ms 的时候, 输入了内容 e           => 那么 h 内容的事件就不触发了           => 而是从输入 e 开始延时 500ms 触发事件

<input type="text">

<script>
	const inp = document.querySelector('input')

	// 2. 函数防抖
	// 准备一个变量接收定时器返回值
	let timer = null
	inp.oninput = function() {
		// 每一次执行这个事件的时候, 都关闭一次定时器
		clearInterval(timer)// 每次触发事件的都把定时器清除

		// 把本来应该立即执行的事情, 延后执行
		timer = setTimeout(() => {// 给 timer 开关赋值
			console.log(`我要搜索的内容是: ${ this.value }`)
		}, 500)

	}
</script>

函数防抖之后只 触发了 1 次 事件 , 节约了浏览器 10 次 的操作性能 ( 10次 请求 , 10次 渲染页面 )

淘宝 : 节省了浏览器的性能( 运用了函数防抖 )

这篇关于JavaScript _ 函数节流和防抖的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！