脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 防抖和节流

JS中的防抖与节流及作用详解

 更新时间：2019年04月01日 14:02:53   作者：我在广州写bug  
这篇文章主要介绍了JS中的防抖与节流及作用详解，本文通过文字说明加示例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

概念

函数防抖（debounce）是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次，比如说用手指一直按住一个弹簧，它将不会弹起直到你松手为止。

函数节流是指一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

下面通过示例代码看下防抖和节流。

什么是防抖？and什么是节流？一起来开心的学习下吧。

首先什么是防抖：就是在一定的时间内事件只发生一次，比如你点击button按钮，1秒内任你单身30年手速点击无数次，他也还是只触发一次。举个例子，当你在页面中使用onkeyUp监听用户在input框中的输入，如果用户按住一个6不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个6，那这样是不是轻松多了。ok，解释清楚了那么就来看下代码，更加清晰。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>防抖</title>
</head>
<body>
 <button id="debounce">防抖，防抖，防抖</button>
 <script>
 window.onload = function () {
  let obtn = document.getElementById('debounce'); //获取按钮
 obtn.addEventListener('click',debounceHandle(debounce),false); //监听绑定事件
 }

 //防抖函数
 function debounceHandle (fn) {
  let timer = null;
  return function () {
  clearTimeout(timer); //如果存在事件就清除定时器
  timer = setTimeout(function(){ //如果不存在那么就开启定时器
   fn.call(this,arguments);
  },300)
  }
 }

 //执行函数
 function debounce() {
  console.log('防抖，防抖，防抖');
 }
 </script>
</body>
</html>

上面函数也就是在300毫秒内，只会触发一次事件。总结：防抖就是在任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

接下来什么是节流，假如在一个页面中有任意多张图片，那么就有可能会使用懒加载技术，懒加载呢就是监听滚动条的位置，那么如果用户一直在滚动，那么事件监听就一直在触发，也是浪费性能。那么节流就是在一定时间间隔内触发一次事件。话不多说，先看代码。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>节流</title>
 <style>
 div {
  height: 5000px;
 }
 </style>
</head>
<body>
 <div>节流,节流,节流</div>
 <script>
 window.onload = function () {
  window.addEventListener('scroll',throttleHandle(throttle),false); //监听绑定事件
 }

 //节流函数
 function throttleHandle (fn) {
  let timer = null,
   booleanVal = true; // 声明一个变量标志做判断
  return function () {
   if (!booleanVal) {
   return 
   } //如果事件正在执行，那么就返回，将布尔值改为false
   booleanVal = false;
   //事件未执行，创建事件
   timer = setTimeout(function() {
   fn.apply(this,arguments);
   booleanVal = true; //事件执行完将布尔值改回
   },300)
  }
 }

 //执行函数
 function throttle() {
  var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollNum);
 }
 </script>
</body>
</html>

这样，在某些特定的工作场景，我们就可以使用防抖与节流来减少不必要的损耗。最后提一个问题，上句提到造成不必要的损耗，那么请问是什么损耗呢？

总结

以上所述是小编给大家介绍的JS中的防抖与节流及作用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • javascript判断iphone/android手机横竖屏模式的函数

    javascript判断iphone/android手机横竖屏模式的函数

    iphone能很好的使用onorientationchange事件，但是android的onresize事件即使不旋转也会触发多次
    2011-12-12
  • 用javascript实现倒计时效果

    用javascript实现倒计时效果

    这篇文章主要为大家详细介绍了用javascript实现倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02
  • 微信JS-SDK选取手机照片上传功能

    微信JS-SDK选取手机照片上传功能

    这篇文章主要为大家详细介绍了微信JS-SDK选取手机照片上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • javascript修改浏览器title方法 JS动态修改浏览器标题

    javascript修改浏览器title方法 JS动态修改浏览器标题

    给大家讲一个用javascript修改浏览器title方法和技巧，需要的朋友把代码测试吧。
    2017-11-11
  • ES6中新增的Object.assign()方法详解

    ES6中新增的Object.assign()方法详解

    Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ），下面这篇文章主要给大家介绍了关于ES6中新增的Object.assign()方法的相关资料，需要的朋友可以参考下。
    2017-09-09
  • 详解JavaScript 高阶函数

    详解JavaScript 高阶函数

    这篇文章主要介绍了JavaScript 高阶函数的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • JS中动态添加事件(绑定事件)的代码

    JS中动态添加事件(绑定事件)的代码

    有时候为了更好的实现代码分离，不用把时间直接写到代码中。通过动态绑定事件即可。
    2011-01-01
  • uniapp小程序和h5如何使用three.js详解

    uniapp小程序和h5如何使用three.js详解

    Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库,下面这篇文章主要给大家介绍了关于uniapp小程序和h5如何使用three.js的相关资料,需要的朋友可以参考下
    2022-12-12
  • 浅谈js原生拖放

    浅谈js原生拖放

    下面小编就为大家带来一篇浅谈js原生拖放。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 详解JavaScript模板化使文章更清晰的全过程

    详解JavaScript模板化使文章更清晰的全过程

    模块化就是把一大段代码拆分成一个个小文件（模块）,每个模块独立工作,互相协作,那么JavaScript模板化是如何使文章更清晰呢,本文给大家详细介绍了JavaScript模板化使文章更清晰的全过程,需要的朋友可以参考下
    2025-04-04

最新评论