首页 / JAVASCRIPT / 详解javascript函数的节流与防抖

详解javascript函数的节流与防抖

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解javascript函数的节流与防抖，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4038字，纯文字阅读大概需要6分钟。

内容图文

本文主要介绍了javascript函数的节流[throttle]与防抖[debounce ]，详细的介绍了节流与防抖的原理和示例，具有一定的参考价值，有兴趣的可以了解一下，希望能帮助到大家。

防抖和节流

窗口的resize、scroll，输入框内容校验等操作时，如果这些操作处理函数较为复杂或页面频繁重渲染等操作时，如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。

这两个东西都是为了项目优化而出现的，官方是没有具体定义的，他们的出现主要是为了解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题；

像这类事件一般像 scroll keyup mousemove resize等等，短时间内不断的触发，在性能上消耗是非常大的，尤其是一些改变DOM结构的操作；

节流[throttle]与防抖[debounce]非常相似，都是让上述这类事件在规定的事件从不断的去触发更改成为规定的时间内触发多少次；

节流[throttle]

节流通俗来解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，这个秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴，这，，，好吧这就是我们节流的概念；

换成函数来说，使用setTimeout方法，给定两个时间，后面的时间减去前面的时间，到达我们给定的时间就去触发一次这个事件，这么说太笼统的，我们看下面的函数，这里我们以【scroll】为例；

/** 样式我就顺便写了 **/
<style>
 *{padding:0;margin:0;}
 .scroll-box{
  width : 100%;
  height : 500px;
  background:blue;
  overflow : auto;
 } 
 .scroll-item{
  height:1000px;
  width:100%;
 }
</style>

------------------------

/** 先给定DOM结构;**/
<p class="scroll-box">
 <p class="scroll-item"></p>
</p>

------------------------

通过以上的函数，我们就可以做到节流的效果，在规定的每300毫秒触发一次，当然时间可以自定义，根据需求来；

防抖[debounce ]

写代码之前，我们先清楚一下防抖的概念，不知道大家有没有做过电脑端两边悬浮广告窗口的这么一个东西，当我们拖动滚动条的时候，两边的广告窗口会因为滚动条的拖动，而不断的尝试着去居于中间，然后你就会看到这两个窗口，不停的抖啊抖；

一般这种就叫抖动了，我们要做的就是防止这种抖动，称为防抖[debounce ]；

那这里防抖思想就是当我们拖动完成之后，两边的窗口位置再重新去计算，这样，就会显得很平滑，看着很舒服了，最主要的操作DOM结构的次数就大大减少了；

优化了页面性能，降低了内存消耗，不然你像IE这种比较老点版本的浏览器，说不定就直接给你蹦了

用书面一点的说法就是，在某个事件没有结束之前，函数不会执行，当结束之后，我们给定延时时间，然他在给定的延时时间之后再去执行这个函数，这就是防抖函数；

来看代码：

思路就是在函数执行之前，我们先清除定时器，如果函数一直执行，就会不断的去清除定时器中的方法，知道我们操作结束之后，函数才会执行；

其实书写的方式有很多，主要还是思路的问题，大家写的多了，自然就知道了；

用途

当我们做keyup像后台请求检验的时候，可以使用防抖函数，不然我们每按一次键盘就请求一次，请求太频繁，这样当我们结束按键盘的时候再去请求，请求少很多了，性能自然不用说；
resize 窗口大小调整的时候，我们可以采用防抖技术也可以使用节流；
mousemove 鼠标移动事件我们既可以采用防抖也可以使用节流；
scroll 滚动条触发的事件，当然既可以采用防抖也可以采用节流；
连续高频发的事件都可以采用这两种方式去解决，优化页面性能；

具体的采用哪一种更较为合适，主要还是看你的业务需求。

内容总结

以上是互联网集市为您收集整理的详解javascript函数的节流与防抖全部内容，希望文章能够帮你解决详解javascript函数的节流与防抖所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/297143.html

来源：【匿名】

【上一篇】JS点击复选框变更p显示状态的示例代码【下一篇】javascript 怎么调用php方法

更多 ►

【详解javascript函数的节流与防抖】教程文章相关的互联网学习教程文章

js的节流与防抖【代码】

1、函数防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。2、函数节流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。函数防抖的实现// 防抖函数实现function debounce(fn, delay = 200) {let timer = null;returnfunction () {let context = this;let args = arguments;// 如果此时存在定时器的话，择取消...

深入了解JavaScript 防抖和节流

概述说明在项目过程中，经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题，而往往我们只需去调用一次处理函数即可。有时也会遇到需要在某一规则内有规律的去触发对应的处理函数，所以就需要使用到函数防抖与函数节流来帮助我们实现我们想要的结果以及避免不必要的问题产生。函数防抖(debounce)定义：当持续触发事件时(如连续点击按钮多此)，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来...

JavaScript中防抖节流的详细介绍（代码示例）

本篇文章给大家带来的内容是关于JavaScript中防抖节流的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。函数节流（throttle）函数节流是指一定时间内执行的操作只...

JavaScript防抖和节流的应用以及实现方法介绍（代码示例）【图】

本篇文章给大家带来的内容是关于JavaScript防抖和节流的应用以及实现方法介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。首先举一个例子：模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>没有防抖</title><style type="text/css"></style><script type="text/javascript">window.onload = ...

javascript函数节流和防抖的应用场景介绍

本篇文章给大家带来的内容是关于php变量作用域的用法介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。throttle 节流事件触发到结束后只执行一次。应用场景触发mousemove事件的时候，如鼠标移动。触发keyup事件的情况，如搜索。触发scroll事件的时候，譬如鼠标向下滚动停止时触发加载数据。coding方法1 防抖// function resizehandler(fn, delay){ // clearTimeout(fn.timer); // fn.timer =...

Javascript中函数节流与防抖的实现（附代码）

本篇文章给大家带来的内容是关于Javascript中函数节流与防抖的实现（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。函数节流（throttle）名词解释函数节流（throttle）：连续执行函数，每隔一定时间执行函数使用场景鼠标移动，mousemove 事件DOM 元素动态定位，window对象的resize和scroll 事件等等...函数节流（throttle）简单实现 function throttle(fn, delay) {var last; // 上次执行的时间var...

JS简单实现防抖-debounce和节流-throttle

一、什么是防抖和节流Ps: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。1. 防抖 - debounce其中一种解决方案就是每次用户停止输入后，延迟超过500ms时，才去搜索此时的String，这就是防抖。原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。代码实现：function debounce(fn, delay) {// 维...

在JS中有关函数节流和函数防抖（详细教程）【图】

这篇文章主要介绍了JS函数节流和函数防抖问题分析，非常不错，具有参考借鉴价值,需要的朋友可以参考下问题1：如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？ **问题2：**如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？为了应对如上场景，便出现...

JS数组扁平化防抖与节流对象拷贝

这次给大家带来JS数组扁平化防抖与节流对象拷贝，JS数组扁平化防抖与节流对象拷贝的注意事项有哪些，下面就是实战案例，一起来看一下。数组扁平化数组扁平化有很多方法，但最终最好的方法就是递归，实现一个指定深度的扁平化方法，这样基本的套路都会了解。function flattenDepth(array, depth = 1) {let result = []array.forEach(item => {let d = depthif (Array.isArray(item) && d > 0) {result.push(...(flattenDepth(item, ...

js高性能函数防抖与节流详解【图】

函数节流是指一定时间内js方法只跑一次，函数防抖：是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。本文主要和大家分享js高性能函数防抖与节流详解，希望能帮助到大家。一.函数节流（throttle）1.函数节流的目的例如，DOM 操作比起非DOM 交互需要更多的内存和CPU时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生，当调整浏览器大小...

javascript函数的节流throttle与防抖debounce详解

本文主要介绍了javascript函数的节流[throttle]与防抖[debounce ]，详细的介绍了节流与防抖的原理和示例，具有一定的参考价值，有兴趣的可以了解一下，希望能帮助到大家。防抖和节流窗口的resize、scroll，输入框内容校验等操作时，如果这些操作处理函数较为复杂或页面频繁重渲染等操作时，如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触...

JS函数节流防抖实例详解

本文主要介绍了JS函数节流防抖，函数节流和函数防抖为了解决类似需求应运而生的，有兴趣的可以了解一下，希望能帮助到大家。在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。函数节流(throttle)函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用...