防抖和节流函数详解（立即执行/非立即执行）

已于 2024-06-08 11:53:15 修改
阅读量7.6k 收藏 39
点赞数 15
分类专栏： js 性能优化 文章标签： 防抖和节流 防抖（非/立即执行） 节流（非/立即执行）
于 2019-08-12 15:57:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Polaris_tl/article/details/99300458
版权

在线查看效果移动鼠标触发

1.防抖（立即执行/非立即执行）
  • 什么是防抖：一个事件在触发后，设置定时器，若n秒内该事件没有再次发生，那么执行这个函数，如果n秒内该事件再次发生了，那么定时器重新开始计时。
  • 应用
    • 每次 resize / scroll 触发统计事件
    • 文本输入的验证 （连续输入文字后发送AJAX请求进行验证，验证一次就好）
  • 1.1 非立即执行版
//防抖(非立即执行)
function debounce_1(fn,wait){
  var timerId = null;
  return function(){
  	var context = this
    var args = arguments
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(context,args)
    },wait)
  }
}
  • 1.2 立即执行版
//防抖(立即执行)
function debounce_2(fn,wait){
  var timerId = null;
  var flag = true;
  return function(){
  	var context = this
    var args = arguments
    clearTimeout(timerId);
    if(flag){
      fn.apply(context, args);
      flag = false
      }
    timerId = setTimeout(() => { flag = true},wait)
  }
}
  • 1.3 合并版
//防抖(合并版)
function debounce_merge(fn,wait = 500,isImmediate = false){
  var timerId = null;
  var flag = true;
  return function(){
    var context = this
    var args = arguments
    clearTimeout(timerId )
    if(isImmediate ){
        if(flag){
            fn.apply(context,args)
            flag = false
        }
        timerId = setTimeout(function(){
            flag = true
        },wait)
    }else{
        timerId = setTimeout(function(){
            fn.apply(context,args)
        },wait)
    }
  }
}
2.节流（立即执行/非立即执行）
  • 什么是节流：若一个函数在一段时间内持续高频触发，节流后将使得该函数在这段时间内每隔固定时间才执行一次
  • 应用
    • 与mousemove keyup/keydown 等相密切联系的函数
  • 2.1 非立即执行版
//定义函数
//节流(非立即执行)
function throttle_1(fn,wait){
  var flag = true;
  return function(){
  	var context = this
    var args = arguments
    if(flag){
      flag = false
      setTimeout(() => {
        fn.apply(context,args)
        flag = true
      },wait)
    }
  }
}
  • 2.2 立即执行版
//节流(立即执行)
function throttle_2(fn,wait){
  var flag = true;
  return function(){
  	var context = this
    var args = arguments
    if(flag) {
      fn.apply(context,args);
      flag = false;
      setTimeout(() => {
        flag = true
      },wait)
    }
  }
}
  • 2.3 合并版
//节流(合并)
function throttle_merge(fn,wait = 500,isImmediate = false){
  var flag = true;
  return function(){
    if(flag == true){
      var context = this
      var args = arguments
      flag = false
      isImmediate && fn.apply(context,args)
      setTimeout(() => {
        !isImmediate && fn.apply(context,args)
        flag = true
      },wait)
    }
  }
}
3.补充
  • 看文字远不如亲自操作了解得透彻，希望还不太明白的小伙伴在下面演示代码具体操作操作
  • 这里的几个函数都是使用的setTimeout来实现的，也可以使用 Date.now()来实现，思路一样，偷个懒就不写了，嘿嘿；
  • 合并版的 debounce(fn,wait,isImmediate) throttle(fn,wait,isImmediate)
4.演示代码

截图
截图
在线查看效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{height: 1200px;}
  	div{width: 100%;background-color: lightcyan;overflow: hidden;}
	p{float: left;width: 10px;height:10px;background-color: pink;margin: 1px;}
  </style>
</head>
<body>
    防抖(非立即执行) <div id="d1_1"></div>
    防抖(立即执行) <div id="d1_2"></div>
    节流(非立即执行) <div id="d2_1"></div>
    节流(立即执行) <div id="d2_2"></div>
    <!-- 原生 <div id="d3"></div> -->
</body>
<script>
//防抖(非立即执行)
function debounce_1(fn,wait){
  var timerId = null;
  return function(){
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(this,arguments)
    },wait)
  }
}
//防抖(立即执行)
function debounce_2(fn,wait){
  var timerId = null;
  var flag = true;
  return function(){
    clearTimeout(timerId);
    if(flag){
      fn.apply(this,arguments);
      flag = false
      }
    timerId = setTimeout(() => { flag = true},wait)
  }
}
//节流(非立即执行)
function throttle_1(fn,wait){
  var flag = true;
  return function(){
    if(flag == true){
      flag = false
      var timer = setTimeout(() => {
        fn.apply(this,arguments)
        flag = true
      },wait)
    }
  }
}
//节流(立即执行)
function throttle_2(fn,wait){
  var flag = true;
  var timer = null;
  return function(){
    if(flag) {
      fn.apply(this,arguments);
      flag = false;
      timer = setTimeout(() => {
        flag = true
      },wait)
    }
  }
}

//定义事件函数
function debounce_fn1(){ addElement(d1_1) }
function debounce_fn2(){ addElement(d1_2) }
function throttle_fn1(){ addElement(d2_1) }
function throttle_fn2(){ addElement(d2_2) }
// function origin(){ addElement(d3) }

//注册事件
var body = document.getElementsByTagName('body')[0]
body.addEventListener("mousemove",debounce_1(debounce_fn1,500))
body.addEventListener("mousemove",debounce_2(debounce_fn2,500))
body.addEventListener("mousemove",throttle_1(throttle_fn1,500))
body.addEventListener("mousemove",throttle_2(throttle_fn2,500))
// body.addEventListener("mousemove",origin)


//辅助函数
function addElement(f){
  var node=document.createElement("p");
	f.appendChild(node);
}
</script>
</html>
Polaris_tl
关注
  • 15
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
js代码-防抖函数（立即执行和非立即执行）
07-15
js代码-防抖函数（立即执行和非立即执行）
JS中的防抖与节流及作用详解
10-17
在JavaScript中，防抖（debounce）和节流（throttle）是两种常见的优化策略，它们主要用于处理高频触发的事件，如窗口的resize、scroll事件，或者用户输入时的keyup事件等。这两种策略的主要目的是限制函数的执行...
JavaScript中的延迟防抖和立即执行防抖
weixin_48723799的博客
06-15 902
标题：JavaScript中的延迟防抖和立即执行防抖简介： 在JavaScript开发中，防抖函数是一种常用的技术，用于控制事件的触发频率。它可以限制事件处理函数的执行次数，从而提高性能和用户体验。本文将介绍延迟防抖和立即执行防抖两种常见的防抖模式，并提供相应的代码示例和用法说明。
前端性能优化篇之对节流与防抖的理解、如何实现节流函数和防抖函数
最新发布
星辰迷上大海的博客
04-29 529
节流和防抖是优化前端性能和提升用户体验的两种技术。节流控制函数在一定时间间隔内最多执行一次特定操作，常用于处理频繁触发的事件；而防抖延迟执行函数，在一段时间内只执行一次特定操作，常用于处理连续触发的事件。
手写防抖（含立即执行和取消）
James_liPeng的博客
06-07 509
特定时间内多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发准备执行事件函数前，会等待一定的时间（这时间是码农自己去定义的，比如 1 秒），如果没有再次被触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时间开始计算，并再次等待 1 秒，直到能最终执行！2.立即执行防抖函数1（立即执行，规定时间内触发多次防抖函数，只执行第一次和最后一次）3. 立即执行防抖函数2（只执行特定时间内的首次触发）
防抖，节流，立即执行防抖
weixin_44334950的博客
04-09 748
防抖节流工具函数及其变种。
防抖节流函数
看陌生的风景的博客
09-15 80
const debounce = function(func, wait, immediate) { //函数防抖[func 函数,wait 延迟执行毫秒数,immediate true 表立即执行,false 表非立即执行,立即执行是触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果] let timeout; return function() { let context = this; let args = arguments; if (timeou.
节流函数
weixin_44481301的博客
08-05 207
//节流函数：如果持续触发事件，每隔一段时间，只执行一次事件，时间戳和定时器两种方式实现 //1.用时间戳实现：第一次调用时间戳，减去上次的时间戳，当大于wait,则执行函数，并更新上次时间戳，如果 // 小于，则不执行 // 第一次调用能立即执行，但是结束调用不能执行最后一次 function throttleWithDate(func, wait = 1000) { ...
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
javascript函数详解!
02-24
JavaScript函数详解 JavaScript是一种强大的、基于原型的、动态类型的脚本语言，广泛应用于网页和网络应用开发。在JavaScript中，函数扮演着核心角色，它们不仅可以作为可执行的代码块，还可以作为值进行传递和存储...
详解Vue中watch的详细用法
10-17
在Vue实例中定义`watch`，可以监视数据属性并执行相应的回调函数。基本的`watch`用法如下： ```javascript new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { ...
bojue.github.io:博客首先是给自己看的
05-10
Bojue 项目列表 TODOList Blog List 前端 网络 ...Cookie机制 ...理解JavaScript立即执行函数 JavaScript的防抖和节流 JavaScript的深拷贝和浅拷贝 JavaScript中call,apply,bind方法的使用及原理 Java
js 实现节流函数， 可传参控制执行时机
倔强的钢蛋
02-16 238
函数节流是指用户在重复操作时，在设定的时间内，延时执行，控制用户操作的频率，例如：滚动条快速滚动，重复请求等等
JS函数防抖和节流全解析
青春木鱼的博客
09-10 1523
防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce）和 节流（throttle）的方式来减少调用频率。节流——n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。防抖——n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时.........
JS的节流与防抖的目的，区别以及实现方式 （关注收藏，持续更新）
王春燕的博客
04-20 6983
一、节流和防抖的目的： 都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象 二、节流和防抖的区别： 防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。 节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次 三、节流和防抖的详解 防抖 debounce（设置1分钟只会执行一次，如果1分钟内又多次触发，会从再次触发开
【JavaScript】手写防抖
wangjiakang12306的博客
01-17 178
function debounce(func, wait, immediate) { // 增加立即执行参数 immediate // 增加返回值,当且只有在immediate为true的时候才会有返回值 var timeout, result; var debounced = function() { // 将this指向正确的对象 var context = this; // 接受event对象 var args = arguments; if(.
节流和防抖函数 以及如何解决请求有防抖但是需要马上响应或获取防抖状态的情况
weixin_44181180的博客
08-16 1851
提示：参考分享看板长时间响应等待出现缺省页的问题解决 文章目录前言一、总结 前言 一、 总结
JS防抖函数的优化（优化立即执行与取消）
weixin_44368048的博客
12-02 1573
JS防抖函数的进一步优化之立即执行与取消 function debounce(fn, delay) { let timer = null; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay)...
js 防抖 原理
酱子
09-14 5748
一、在前端中有一些事件会频繁的触发容易造成页面卡顿，例如： window 的 resize、scroll mousedown、mousemove keyup、keydown input 的 input 事件 二、防抖的原理 答：不管触发多少次事件，都会等到事件触发 **n 秒后 **才会执行，如果在事件触发的 n 秒内 又触发了这个事件，那么就以新的事件的时间为准重新计算，总之，就是要等你触发事件 n 秒内 不再触发事件，我才会执行，一般用在用户表单输入实时搜索上 // 第一版 // 缺点：函数的 th
js 手写防抖和节流函数
04-16
好的，我可以回答你关于 JavaScript 手写防抖和节流函数的问题。 先，防抖和节流函数是为了解决高频率触发某个事件时，减少事件触发的次数，提高性能而设计的。 防抖函数的作用是在某个函数触发后，延迟一定的时间再执行这个函数，若在延迟时间内，这个函数又被触发，则重新计时，最后只会执行一次这个函数。以下是防抖函数的示例代码： ```javascript function debounce(func, delay) { let timer = null; return function () { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(function () { func.apply(context, args); }, delay); }; } ``` 节流函数的作用是在某个函数触发后，不立即执行这个函数，而是等到一定的时间后，才执行这个函数，若在等待时间内，这个函数又被触发，则忽略这个函数的执行。以下是节流函数的示例代码： ```javascript function throttle(func, delay) { let timer = null; return function () { const context = this; const args = arguments; if (!timer) { timer = setTimeout(function () { func.apply(context, args); timer = null; }, delay); } }; } ``` 以上就是 JavaScript 手写防抖和节流函数的基本实现方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值