js 防抖（debounce）与节流(throttle)

最新推荐文章于 2024-05-01 08:19:11 发布

小小飞肖

最新推荐文章于 2024-05-01 08:19:11 发布

阅读量318

点赞数

分类专栏： js常用操作

本文链接：https://blog.csdn.net/qq_32766999/article/details/94854494

版权

js常用操作专栏收录该内容

38 篇文章 0 订阅

订阅专栏

防抖与节流涉及到两个概念

开始边界与结束边界

防抖（debounce）：(鼠标mousemove)

search搜索，用户在不断输入值时，用防抖来节约请求资源；

window触发resize的时候；

不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来使其只触发一次

防止重复提交。

节流（throttle）(鼠标mousedown)

鼠标监听滚动事件，比如是否滑动到底部或者加载更多

防抖可封装的方法如下：

防抖的应用场景（提交按钮的点击都要做防抖，防止测试以及用户恶意点击）

<!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>
  #container{
    background: #000;
    color: #fff;
    width: 500px;
    height: 100px;
  }
  </style>
</head>

<body>
  
<div id="container">

</div>
<script>
 var container = document.getElementById('container')
 container.onmousemove = debounce(getConuntAdd,1000,false)
 var count = 1;
 function getConuntAdd(){
    this.innerHTML = count++
 }
 function debounce(fn,wait,flag){
   var timeout;
   return function(){
     var self = this;
     clearTimeout(timeout)
     if(flag){
       // 进入之后立即执行 开始边界
       var callNow = !timeout;
       timeout = window.setTimeout(function(){
         timeout = null;
       },wait);
       if(callNow){
         fn.apply(self)
       }
     }else{
       // 进入之后延迟执行 结束边界
       timeout = window.setTimeout(function(){
         fn.apply(self)
       },wait)
     }
   }
 }
</script>
</body>
</html>

节流可封装的方法如下：

节流的意义：

就是你要查询一个用户名是否存在，产品的逻辑又是要你实时查，不能blur的时候查，你就写一个节流函数，每隔几百毫秒获取输入框的内容查一次，input框change的时候用上节流

在给定的时间间隔内执行一次

function throttle(fn,wait,flag){
    var previous = 0;//参照物
    return function(){
      var self = this;
      var now = +new Date();
      if(now-previous>wait){
        fn.apply(self);
        previous = now;
      }
    }


 }

小小飞肖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 防抖（debounce）与节流(throttle)

防抖与节流涉及到两个概念开始边界与结束边界防抖（debounce）：(鼠标mousemove)search搜索，用户在不断输入值时，用防抖来节约请求资源；window触发resize的时候；不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来使其只触发一次防止重复提交。节流（throttle）(鼠标mousedown)鼠标监听滚动事件，比如是否滑动到底部或者加载更...
复制链接

扫一扫