js的防抖和节流应用

首先要知道什么场景用防抖,什么场景用节流

函数防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

应用场景:

1.登录、注册按钮避免用户点击太快,以致于发送了多次请求,需要防抖

2.mousemove、mouseover鼠标移动事件防抖

函数节流:控制事件发生的频率,如控制为1s发生一次,甚至1分钟发生一次。

应用场景:

1.scroll 事件,滚动监听事件,每隔一秒计算一次位置信息等

2.高频点击提交,表单重复提交

 

 

vue项目如何快速使用函数防抖和节流

先创建一个js文件,放到一个文件夹下

js的防抖和节流应用

然后复制下列代码。。

// 防抖
export const antiShake= (fn, t) => {
    let delay = t || 2000
    let timer
    return function () {
      let args = arguments;
      if (timer) {
        clearTimeout(timer)
      }
      let callNow = !timer
      timer = setTimeout(() => {
        timer = null
      }, delay)
      if (callNow) fn.apply(this, args)
    }
} 

// 节流
export const throttle = (fn, t) => {
  var timers = null;            
  return function() {                
      var context = this;               
      var argst = arguments;                
      if (!timers) {                    
          timers = setTimeout(function() {                        
              fu.apply(context, argst);
              timers = null;                    
          }, t);
      }            
  }   
}

然后就是如何在项目中使用了

先在script中引入

js的防抖和节流应用

在函数中使用防抖,节流同理

js的防抖和节流应用

//引入,用几个../看你文件所在位置
import {antiShake} from ‘../../utils/utils.js‘; //防抖节流

//点击按钮调用防抖
addMsrwBtn:antiShake(function(){
            
}),

 

js的防抖和节流应用

上一篇:pdf2htmlEX 源码编译安装


下一篇:JS基础学习第七天