什么是防抖和节流?有什么区别?如何实现

news/2024/7/19 15:37:12 标签: js

在前端的面试中,经常会问到 防抖节流 的问题,这里我简单的说一下自己的理解。

防抖:

  • 在任务高频率触发的时候,只有触发间隔超过指定间隔的时间,任务才会执行

  • 在每次函数执行之前先清空上一次设置的定时器,原因是:如果执行间隔大于n秒,那么先前的定时任务一定已经执行完毕,当执clearTimeout时,其实并没有定时器可清楚,否则定时器会被清除,然后重新计时

function debounce (fn,wait,immediate){
	  var timer = null;
	  console.log(fn,wait,immediate,'aaa')
	  return ()=>{
	    //判断首次是否需要立即执行
	    if(immediate){
			console.log('立即执行')
	      fn.call(this,arguments)
		  immediate = false;
	    }
		//清除定时器
		clearInterval(timer)
		timer = setTimeout(()=>{
			console.log('再次执行')
			fn.call(this,arguments)
		},wait)
	  }
}

节流:

  • 在指定间隔内任务只执行一次

  • 在每次函数执行之前,先判断是否存在定时器,存在则跳过本次执行,否则设置新的定时器

function debounce (fn,wait,immediate){
	  var timer = null;
	  console.log(fn,wait,immediate,'aaa')
	  return ()=>{
	    //判断首次是否需要立即执行
	    if(immediate){
			console.log('立即执行')
	      fn.call(this,arguments)
		  immediate = false;
	    }
		
		//如果当前存在定时器,返回;否则设置定时器
		if(timer) return ;
		//清除定时器
		clearInterval(timer)
		timer = setTimeout(()=>{
			console.log('再次执行')
			fn.call(this,arguments)
		},wait)
	  }
}

区别:

  • 一定时间内任务执行的次数
  • 节流 – 被调用n次,只在time间隔时间点运行
  • 防抖 – 被调用n次,只执行一次

http://www.niftyadmin.cn/n/1558323.html

相关文章

web-java-java collections framework

参考 官方教程 https://docs.oracle.com/javase/6/docs/technotes/guides/collections/ https://docs.oracle.com/javase/8/docs/technotes/guides/collections/overview.html 转载于:https://juejin.im/post/5a5aa959f265da3e3b7a7af1

canvas压缩多张图片(一)

随着技术的不断更新,前端压缩图片的需求也越来越多,但是一直没有一个好的方案。这里我结合canvas对图片进行了压缩,前端的同学可以借鉴一下 canvas压缩多张图片(二) canvas压缩多张图片(三) //…

《逆向分析实战》数据的存储及表示形式

本文摘自人民邮电出版社异步社区《逆向分析实战》一书,点击查看http://www.epubit.com.cn/book/details/4918关注微信公众号【异步社区】每周送书 学习过计算机的读者都知道,计算机中的各种数据都是以二进制形式进行存储的,无论是文本文件、图…

浏览器返回拦截

在开发微信公众号时,经常遇到返回拦截的问题,这里我有一个开发中遇到的例子,大家可以参考一下: //退出微信公众号‘ WeixinCloseWindow ()>{//这个可以关闭安卓系统的手机document.addEventListener("WeixinJSBridgeRea…

CSS中的BFC详解

这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。 一、何为BFC BFC(Block Formatting Context)格式化上下文,是Web页…

JS中的原型链和原型的认识

这篇文章主要是学习一下JavaScript中的难点------原型和原型链自定义一个对象 我们学习一门编程语言,必然要使用它完成一些特定的功能,而面向对象的语言因为符合人类的认知规律,在这方面做得很好,今天我以JS为例,探索一…

js 判断视频大小、上传视频

前端上传视频时肯定需要考虑大小是否超限&#xff0c;格式是否符合&#xff0c;这里我们简单的做一下校验 首先我们先用input上传视频 <input type"file" id"teacherIntroductionVideo" accept"audio/mp4, video/mp4" ref"teacherIntr…

input 上传多张图片

input上传视频(一)上传视频、并判断大小 canvas压缩图片(二)canvas压缩图片(二) pc端上传图片&#xff0c;一张张的选太过麻烦&#xff0c;这里我们通过multiple属性便可以轻松搞定 <input type"file" accept"image/*" change"onFileChange(phot…