JS中的防抖和节流，包含vue使用防抖和节流（有例子方便理解）

最新推荐文章于 2023-06-28 16:22:04 发布

是小橙丶

最新推荐文章于 2023-06-28 16:22:04 发布

阅读量1.5k

点赞数 3

分类专栏：前端学习防抖节流

本文链接：https://blog.csdn.net/weixin_42125732/article/details/116062263

版权

前端学习同时被 2 个专栏收录

23 篇文章 3 订阅

订阅专栏

防抖节流

2 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的函数防抖和函数节流的概念、实现方式及应用场景。通过示例代码展示了如何在输入事件中使用防抖和节流优化性能，减少不必要的请求。同时，给出了在Vue中如何封装并使用防抖和节流的公共方法。

摘要由CSDN通过智能技术生成

函数防抖：是指在事件被触发 n 秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
函数节流
是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在
scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。

<script>
// 函数防抖的实现
function debounce(fn, wait) {
  var timer = null;

  return function() {
    var context = this,
      args = arguments;

    // 如果此时存在定时器的话，则取消之前的定时器重新记时
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    // 设置定时器，使事件间隔指定事件后执行
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, wait);
  };
}

// 函数节流的实现;
function throttle(fn, delay) {
  var preTime = Date.now();

  return function() {
    var context = this,
      args = arguments,
      nowTime = Date.now();

    // 如果两次时间间隔超过了指定时间，则执行函数。
    if (nowTime - preTime >= delay) {
      preTime = Date.now();
      return fn.apply(context, args);
    }
  };
}
</script>

防抖节流例子

防抖：由此可以看出来，当我们重新频繁的输入后，并不会立即调用方法，只有在经过指定的间隔内没有输入的情况下才会调用函数方法

<body>
	 <input id="input" type="text" placeholder="请输入...">
	 <p id="text"></p>
</body>

<script>
	//函数防抖的实现
	function input(value){
		console.log(`输入的内容${value}`)
	}
	const ipt = document.getElementById('input')
	
	function debounce(fn, wait) {
	  var timer = null;
	
	  return function() {
	    var context = this,
	     args = arguments;
	
	    // 如果此时存在定时器的话，则取消之前的定时器重新记时
	    if (timer) {
	      clearTimeout(timer);
	      timer = null;
	    }
	
	    // 设置定时器，使事件间隔指定事件后执行
	    timer = setTimeout(() => {
	      fn.apply(context, args);
	    }, wait);
	  };
	}
	const debounceInput  = debounce(input,500)
	ipt.addEventListener("keyup",function(e){
	     debounceInput(e.target.value)
	})
</script>

节流:节流节流就是在规定的时间间隔呢，重复触发函数，只有一次是成功调用.可以从下面例子看到在一直输入的情况下每隔一段时间会触发一次函数

<body>
	 <input id="input" type="text" placeholder="请输入...">
	 <p id="text"></p>
</body>
<script>
		//节流节流就是在规定的时间间隔呢，重复触发函数，只有一次是成功调用
		//可以看到在一直输入的情况下每隔一段时间会触发一次函数
		function input(value){
			console.log(`输入的内容${value}`)
		}
		const ipt = document.getElementById('input')
		
		function throttle(fn, delay) {
		  var preTime = Date.now();
		
		  return function() {
		    var context = this,
		      args = arguments,
		      nowTime = Date.now();
		
		    // 如果两次时间间隔超过了指定时间，则执行函数。
		    if (nowTime - preTime >= delay) {
		      preTime = Date.now();
		      return fn.apply(context, args);
		    }
		  };
		}
		
		const throttleInput  = throttle(input,500)
		ipt.addEventListener("keyup",function(e){
		     throttleInput(e.target.value)
		})
</script>

方法总结：

防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗。
防抖就是在出发后的一段时间内执行一次，例如：在进行搜索的时候，当用户停止输入后调用方法，节约请求资源
节流就是在频繁触发某个事件的情况下，每隔一段时间请求一次，类似打游戏的时候长按某个按键，动作是有规律的在间隔时间触发一次

Vue防抖节流的使用

封装公用的方法
第一步：在utils文件夹下建立public.js文件

<script>
 export const Debounce = (fn, t) => {
    let delay = t || 500
    let timer
    return function () {
      let args = arguments
      if(timer){
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        timer = null
        fn.apply(this, args)
      }, delay)
    }
  };


/**
 * 函数节流
 * @param fn
 * @param interval
 * @returns {Function}
 * @constructor
 */
export const Throttle = (fn, t) => {
  let last
  let timer
  let interval = t || 500
  return function () {
    let args = arguments
    let now = +new Date()
    if (last && now - last < interval) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        last = now
        fn.apply(this, args)
      }, interval)
    } else {
      last = now
      fn.apply(this, args)
    }
  }
}
</script>

第二步：在组件中引入

import { Debounce, Throttle } from '../../utils/public.js' //自己要注意自己的路径

第三步：在组件内使用

<template>
	<div>
		<div>
			防抖：<input v-model="name" type="text" @keyup="appSearch">
		</div>
		
		<div style="margin-top: 20px;">
			<button @click="jieliu" :buttonname="buttonname">{{buttonname}}</button>
		</div>
		
	</div>
</template>

<script>
	import { Debounce, Throttle } from '../../utils/public.js'
	export default{
		data(){
			return{
				name:'',
				buttonname:'节流'

			}
		},
		methods:{
			//防抖事件
			appSearch: Debounce (function() {
					this.getfangdoudata()
			}, 1000),
			
			getfangdoudata() {
				
				console.log(this.name)
			},
			getjieliudata(){
				console.log('节流')
			},
			
			//节流事件
			jieliu:Throttle(function(){
				this.getjieliudata()
			},1000)
		},
		
		
	}
</script>

结果如图所示
在这里插入图片描述

若有不足之处或者错误之处，希望大家多多指点一下，谢谢大家呀！

是小橙丶

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JS中的防抖和节流，包含vue使用防抖和节流（有例子方便理解）

函数防抖：是指在事件被触发 n 秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。// 函数防抖的实现function debounce(fn, wait) { var timer = null.
复制链接

扫一扫

专栏目录