广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript防抖与节流详解
  • 750
分享到

JavaScript防抖与节流详解

2024-04-02 19:04:59 750人浏览 安东尼
摘要

目录防抖debounce节流throttle总结防抖debounce 定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。 关于防抖,

防抖debounce

定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。

关于防抖,拿手指按压弹簧举例,用手指按压弹簧,一直按住,弹簧将不会弹起直到松开手指。

举例resize:


function debounce(fn, wait){
    var timer = null;
    return ()=>{
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("resize",debounce(handle, 1000));

上面是非立即执行版

立即执行版


function debounce(fn, wait){
	let timeid, flag = true;
	return () => {
		clearTimeout(timeid);
		if(flag){
			fn();
			flag = false;
		}else{
			timeid = setTimeout(()=>{
				flag = true;
			}, wait);
		}
	}
}

拖动浏览器窗口,触发resize,此时并不触发handle函数,定时器计时,在计时时间内再次触发resize的话,则会从新计时,这样做的好处就是拖动浏览器窗口触发resize,并不会频繁执行handle函数,只让其在需要执行的时候去运行,有效的去除了冗余。

常见写法:


const debounce = (func, delay = 200) => {
  let timeout = null
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

节流throttle

定义:让事件在一定时间内只执行一次。

本意是像水龙头的水滴一样,规定时间内只执行一次,减少频繁反复执行。

如搜索框input事件。

通过时间戳计算:


function throttle(fn,wait){
  let startTime = 0;
  return function(){
    let endTime = Date.now();
    if(endTime-startTime>wait){
      fn();
      startTime = endTime;
    }
  }
}

通过定时器:


function throttle(fn,wait){
  let timeid = null;
  return function(){
    if(!timeid){
       timeid = setTimeout(function(){
         fn();
         timeid = null;
       },wait)
    }
  }
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: JavaScript防抖与节流详解

本文链接: https://www.lsjlt.com/news/154752.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript防抖与节流详解
    目录防抖debounce节流throttle总结防抖debounce 定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。 关于防抖,...
    99+
    2022-11-12
  • JavaScript 防抖和节流详解
    目录防抖节流总结防抖 自动门感应到有人,打开门,并且开始5秒倒计时,在 5 s 内有另外一个人靠近到门,门感应到人,重新5秒倒计时 当事件被触发时,设定一个延迟,若期间事件又被触发...
    99+
    2022-11-12
  • JavaScript中函数的防抖与节流详解
    目录一、函数的节流1.1 定义1.2 解决方法1.3 案例演示1.3 .1  代码演示1.3 .2  运行结果1.3 .3  添加函数节流操作1.3 ....
    99+
    2022-11-13
  • JavaScript防抖与节流超详细全面讲解
    目录1 为什么需要防抖和节流2 防抖与节流原理3 实现一个防抖函数3.1 初步实现3.2 this问题3.3 event问题3.4 立即执行3.5 返回值问题3.6 取消防抖3.7 ...
    99+
    2022-11-13
    JavaScript防抖与节流 JavaScript防抖 JavaScript节流
  • JavaScript深入理解节流与防抖
    目录一、js防抖和节流二、为什么滚动scroll、窗口resize等事件需要优化三、滚动和页面渲染前端性能优化的关系四、防抖Debounce1 防抖Debounce情景2 防抖原理3...
    99+
    2022-11-13
  • JavaScript 防抖debounce与节流thorttle
    目录一、防抖(Debounce)1.1 防抖函数的实现(1)版本1 —— 停止触发事件n毫秒后执行回调函数(2)版本21.2 防抖的实际应用(1)搜索框建议项...
    99+
    2022-11-13
  • 浅谈JavaScript节流与防抖
    目录节流与防抖概念:区别节流实现节流函数防抖实现防抖函数防抖升级版总结 节流与防抖概念:区别节流实现节流函数防抖实现防抖函数防抖升级版总结 节流与防抖 背景:当我们频繁去请求资源、接...
    99+
    2022-11-12
  • JavaScript防抖动与节流处理
    针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。 因此针对这类事件要进行防抖动或者节流处理 防...
    99+
    2022-11-13
  • JavaScript节流与防抖实例分析
    本篇内容主要讲解“JavaScript节流与防抖实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript节流与防抖实例分析”吧!一、js防抖和节流在进行窗口的resize、sc...
    99+
    2023-06-29
  • 什么是JavaScript的防抖与节流
    目录一、函数防抖(debounce) 1. 什么是防抖? 二、函数节流 2.1 定时器实现 2.2 时间戳实现 2.3 时间戳+定时器 一、函数防抖(debounce) 1. 什么...
    99+
    2022-11-12
  • JavaScript如何实现防抖与节流
    这篇文章主要介绍了JavaScript如何实现防抖与节流,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。概念防抖:点击N次提交按钮,只有最后一次会发出请求。减少无效请求的次数。...
    99+
    2023-06-29
  • JavaScript防抖与节流怎么使用
    这篇文章主要讲解了“JavaScript防抖与节流怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript防抖与节流怎么使用”吧!前言:防抖(Debounce) ...
    99+
    2023-06-30
  • Vue3中的极致防抖/节流详解(附常见方式防抖/节流)
    目录前言防抖或节流原理防抖(debounce)示例代码使用节流(throttle )示例代码使用环境说明新封装防抖(debounce)常见封装-1常见封装-2新封装使用节流(thro...
    99+
    2023-02-06
    vue3防抖节流 vue 防抖和节流 前端防抖和节流
  • JavaScript防抖动与节流如何处理
    今天小编给大家分享一下JavaScript防抖动与节流如何处理的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。针对一些会频繁触...
    99+
    2023-07-02
  • javascript的防抖节流函数解析
    目录防抖节流函数的解析认识防抖和节流函数认识防抖debounce函数防抖函数的案例认识节流throttle函数节流函数的应用场景自定义防抖和节流函数总结防抖节流函数的解析 认识防抖和...
    99+
    2022-11-12
  • 详解Java中的防抖和节流
    目录概念防抖(debounce)节流(throttle)区别Java实现防抖(debounce)防抖测试1防抖测试2防抖测试简易版节流(throttle)节流测试1彩蛋解决方法1解决...
    99+
    2022-11-13
    Java防抖 Java 节流 Java 防抖 节流
  • JavaScript函数防抖与函数节流的定义及使用详解
    目录一、函数防抖(Debouncing)1、基本概念2、算法思想3、代码实现4、使用场景二、函数节流(Throlle)1、基本概念2、算法思想3、代码实现4、使用场景一、函数防抖(D...
    99+
    2022-11-13
    JavaScript函数防抖 JavaScript函数节流 JavaScript 函数防抖 节流
  • 怎么理解javascript中防抖和节流
    本篇内容介绍了“怎么理解javascript中防抖和节流”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • javascript的防抖和节流你了解吗
    一:为什么需要防抖与节流  防抖和节流都是为了解决短时间内大量触发某函数或者事件而导致的性能问题,比如在 1.用户体验上,触发频率过高导致的响应速度跟不上触发频率,出现延迟...
    99+
    2022-11-13
  • JavaScript防抖与节流的实现与注意事项
    目录概念实现测试注意事项总结概念 防抖:点击N次提交按钮,只有最后一次会发出请求。减少无效请求的次数。 节流:每点击一次按钮,都会失效一段时间。降低触发的频率。 实现 functi...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作