防抖和节流

约定不等于承诺〃 2023-01-08 02:06 94阅读 0赞

## 防抖 ##

*  是为了防止频繁触发的操作，在指定时间内我们让用户的行为只触发一次在第一次点击时/最后一次点击时（只能识别一次）

function debounce(func, time, isStart) { 
        //如果第一个参数不是function 直接提示错误
        if (typeof func !== 'function') throw new TypeError("func must be required and be an function!");
        //如果time不传默认300毫秒
        if (typeof time === 'boolean') { 
          isStart == time;
          time = 300;
        }
        //如果time不是number类型也给他一个默认300毫秒
        if (typeof time !== "number") { 
          time = 300;
        }
        //如果isStart不传默认false
        if (typeof isStart !== "boolean") isStart = false;
    
        var timer = null,
            result;
    
        return function proxy() { 
          var self=this,
              param = [].slice.apply(arguments);
    
          //如果定时器存在，说明是触发行为是在time时间内
          if (timer) { 
            //清除定时器，重新设置一个定时器
            clearTimeout(timer);
          }
          //如果isStart为true && 定时器不存在立即执行
          if (isStart && !timer) { 
            result = func.apply(self,param)
          }
          timer = setTimeout(function () { 
            if(timer){ 
              clearTimeout(timer);
              timer = null;
            }
            !isStart ? result = func.apply(self,param) : null;
          }, time)
        }
        return result;
      }

> 调用方法及参数说明：

let box = document.body.querySelector(".box");
      //直接给box绑定点击事件，如果不做控制，每点击一次都会触发一次func方法
      function func(ev) { 
        console.log("OK")
      }
      /* *参数：func,time,isStart * func:回调函数，当行为触发要执行的函数 * time:间隔时间，在多长时间内认为 点击行为属于频繁触发 * isStart:在点击行为第一次触发时执行，还是最后一次点击行为触发时执行 默认false（最后一次） */
      box.onclick = hyg.debounce(func, 1000, false)

## 节流 ##

*  是为了降低触发的频率，能识别多次，在指定时间内多长时间触发一次

function throttle(func, time){ 
        //如果第一个参数不是function 直接提示错误
        if (typeof func !== 'function') throw new TypeError("func must be required and be an function!");
        //如果time不是number类型给它一个默认300毫秒
        if (typeof time !== "number") time = 300;
        var timer = null,
            createTimerDate=0,//记录创建定时器的时间
            result;
        return function proxy(){ 
    
          var nowDate = +new Date,//当前时间
              shortTime =nowDate - createTimerDate,//当前时间-定时器创建时间
              self=this,
              param = [].slice.apply(arguments);//参数处理
          //!timer定时器存在 && shortTime>=time还没到下一次执行的时间
          if(shortTime>=time && !timer){ 
            timer = setTimeout(function(){ 
              //触发要执行的函数 重新复制定时器创建时间
              createTimerDate=+new Date();
              if(timer){ 
                clearTimeout(timer);
                timer = null;
              }
              result = func.apply(self,param);
            },time)
          }
    
        }

> 调用方法及参数说明：

//定义滚动条滚动执行的方法
      function func(ev) { 
        console.log("OK")
      }
      /* *参数：func,time * func:回调函数，当行为触发要执行的函数 * time:间隔时间，隔多长时间触发一次 */
      window.onscroll=throttle(func,300);

发表评论取消回复

表情：

评论列表（有 0 条评论，94人围观）

还没有评论，来说两句吧...

相关阅读

相关防抖和节流

前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去...

梦里梦外;/ 2024年04月18日 21:02/ 0 赞/ 20 阅读

相关防抖和节流

防抖是为了防止频繁触发的操作，在指定时间内我们让用户的行为只触发一次在第一次点击时/最后一次点击时（只能识别一次） function debounce(

约定不等于承诺〃/ 2023年01月08日 02:06/ 0 赞/ 95 阅读

相关防抖节流

防抖(debounce) 从滚动条监听的例子说起先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们

叁歲伎倆/ 2022年11月14日 14:41/ 0 赞/ 144 阅读

相关防抖和节流

防抖（debounce）:当持续触发事件时，保证只执行最后一次事件处理函数 > 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。如鼠标移动事件onmousemo

àì夳堔傛蜴生んèń/ 2022年11月05日 08:32/ 0 赞/ 148 阅读

相关防抖和节流

防抖所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。触发高频事件后n秒内函数只会执行一次，如果n秒

待我称王封你为后i/ 2022年08月30日 11:37/ 0 赞/ 159 阅读

相关防抖和节流

1. 防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 \ 思路：每次触发事件时都取消之前的延时调用方法 function

朱雀/ 2022年03月18日 01:44/ 0 赞/ 239 阅读

相关节流、防抖

节流和防抖主要处理事件处理函数高频调用，减少浏览器负担节流：尽量减少触发次数，mint-ui上封装了一个方法 <script> var t

向右看齐/ 2022年01月30日 00:39/ 0 赞/ 259 阅读

相关防抖和节流

防抖和节流一、什么是防抖二、防抖使用场景 1.输入框是按键触发请求时三、什么是节流四、节流的使用场景 1.鼠标连续

快来打我*/ 2021年09月07日 06:13/ 0 赞/ 407 阅读

相关防抖节流

通过闭包返回的函数来进行操作,使得变量一直存在防抖: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

不念不忘少年蓝@/ 2021年07月24日 23:49/ 0 赞/ 385 阅读

相关防抖节流

vue代码防抖 // timer用于储存定时器 delayed(){ // 检测定时器 if(this.timer){

妖狐艹你老母/ 2021年07月24日 18:39/ 0 赞/ 401 阅读