函数防抖与节流使用lodash

本文主要介绍函数防抖与节流怎么使用lodash去解决

函数防抖与节流

  • 正常:事件触发非常频繁,而且每一次的触发,回调函数都要去执行(如果时间很短,而回调函数内部有计算,那么很可能出现浏览器卡顿)
  • 防抖:前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行最后一次
  • 节流:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发

简单区别:

防抖:用户操作频繁,但是只执行一次
节流:用户操作频繁,但是把频繁的操作变为少量操作【可以给浏览器有充裕的时间解析代码】

防抖示例:( 使用lodash封装好的方法_.debounce)

lodash官网
lodash插件:里面封装函数的防抖与节流的业务**【闭包加延时器】(如果自己写必须会【闭包加延时器】)
lodash函数库对外暴露
_函数**

原生示例

下载lodash.js

<head>
	...
	<script src="./js/lodash.js">script>
	head>
<body>
	<p>
		请输入搜索的内容:<input type="text">
	p>
body>
<script>
	// 防抖:前面的所有的触发都被取消,最后一次执行 在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行一次
	let input = document.querySelector('input')
	// 文本发生变化立即执行
	input.oniput = _.debounce(function() {
		cnsole.log('ajax发请求')
	}, 1000)
script>

节流示例:( 使用lodash封装好的方法_.throttle)

<head>
	...
	<script src="./js/lodash.js">script>
	head>
<body>
	<div>
		<h1>我是计时器<span>0span>h1>
		<button>点击我加上1button>
	div>
body>
  • 不做节流
<script>
	// 获取节点
	let span = document.querySelector('span')
	let button = document.querySelector('button')
	let count = 0
	button.onclick = function(){
		count++;
		span.innerHTML = count
		console.log('执行')
	}
script>
  • 做节流
<script>
	// 获取节点
	let span = document.querySelector('span')
	let button = document.querySelector('button')
	let count = 0
	// 计时器:在一秒以内,数字只能加上1
	button.onclick = _.throttle(function(){
		// 节流:目前这个回调函数5s执行一次
		// 加上这里有很多的业务逻辑,是不是可以给浏览器很充裕的时间去解析
		count++;
		span.innerHTML = count
		console.log('执行')
	})
script>

你可能感兴趣的:(JavaScript,前端,javascript,react.js)