js节流和防抖(转)

32 篇文章 2 订阅
30 篇文章 0 订阅

直接上代码。其中防抖反而是最简单的,我已经把代码吃透,并且附上注释。

防抖部分只有代码。但是也没有问题。都来自大神的博客,并且自己小改。

大神博客地址:

防抖:https://blog.csdn.net/Beijiyang999/article/details/79832604

节流:https://blog.csdn.net/Beijiyang999/article/details/79836463

代码:

//防抖函数:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。
//原理:利用js闭包原理。特点在于函数其实需要在刚完成时需要被使用,形成变量赋值给另一个变量,由被赋值的变量进行使用。
/*
 * 传入参数:
 * 1:回调函数
 * 2:延迟时间,默认500,
 * 3:是否立即执行
 * */
const antiShake = function(callback, wait = 500, immediate = true) {
  //定义计时器 ID
  let timeout = null;
  let debounced = function() {
    let self = this;
    //如下为新写法,等同于if为true则执行,类似写法还有三元表达式
    timeout && clearTimeout(timeout);
    if (immediate) {
      let callNow = !timeout;
      /*原理:如果不用apply的话会导致函数本身的参数传递无法传递,并且this对象指向不正确
       * apply解析:
       * 这里apply劫持了callback函数
       * 本身retrun function 所对应的对象才是本身的vue对象,但是处于回调中会获取不到。所以
       * 用apply把回调函数的this替换为self,参数(arguments)也正常传递过去
       * */
      if (callNow) callback.apply(self, arguments);
      timeout = setTimeout(
        () => {
          timeout = null;
        }, //见注解
        wait
      );
    } else {
      timeout = setTimeout(() => {
        callback.apply(self, arguments);
      }, wait);
    }
  };
  //取消执行,需要把immediate才有意义
  debounced.cancel = function() {
    clearTimeout(timeout);
    timeout = null;
  };
  return debounced;
};
// 注解:作为开关变量,表明一个周期结束。使得 callNow 为 true,目标函数可以在新的周期里被触发时被执行
// timeout 作为闭包引用的上层函数的变量,是不会自动回收的。手动将其设置为 null ,让它脱离执行环境,一边垃圾收集器下次运行是将其回收。

/*函数节流
定义:触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。
原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。*/
/*参数:
1、回调函数
2、间隔时间
3、设置 options 作为第三个参数,然后根据传的值判断到底哪种效果,约定:
leading:false 表示禁用第一次执行
trailing: false 表示禁用停止触发的回调*/
let throttle = function(func, wait = 500, options) {
  // eslint-disable-next-line no-unused-vars
  let time, context, args, result;
  let previous = 0;
  if (!options) options = {};

  let later = function() {
    previous = options.leading === false ? 0 : new Date().getTime();
    time = null;
    func.apply(context, args);
    if (!time) context = args = null;
  };

  let throttled = function() {
    let now = new Date().getTime();
    if (!previous && options.leading === false) previous = now;
    let remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (time) {
        clearTimeout(time);
        time = null;
      }
      previous = now;
      func.apply(context, args);
      if (!time) context = args = null;
    } else if (!time && options.trailing !== false) {
      time = setTimeout(later, remaining);
    }
  };
  throttled.cancel = function() {
    clearTimeout(time);
    time = null;
    previous = 0;
  };
  return throttled;
};

export { antiShake, throttle };
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
内容介绍 项目结构: Controller层:使用Spring MVC来处理用户请求,负责将请求分发到相应的业务逻辑层,并将数据传递给视图层进行展示。Controller层通常包含控制器类,这些类通过注解如@Controller、@RequestMapping等标记,负责处理HTTP请求并返回响应。 Service层:Spring的核心部分,用于处理业务逻辑。Service层通过接口和实现类的方式,将业务逻辑与具体的实现细节分离。常见的注解有@Service和@Transactional,后者用于管理事务。 DAO层:使用MyBatis来实现数据持久化,DAO层与数据库直接交互,执行CRUD操作。MyBatis通过XML映射文件或注解的方式,将SQL语句与Java对象绑定,实现高效的数据访问。 Spring整合: Spring核心配置:包括Spring的IOC容器配置,管理Service和DAO层的Bean。配置文件通常包括applicationContext.xml或采用Java配置类。 事务管理:通过Spring的声明式事务管理,简化了事务的处理,确保数据一致性和完整性。 Spring MVC整合: 视图解析器:配置Spring MVC的视图解析器,将逻辑视图名解析为具体的JSP或其他类型的视图。 拦截器:通过配置Spring MVC的拦截器,处理请求的预处理和后处理,常用于权限验证、日志记录等功能。 MyBatis整合: 数据源配置:配置数据库连接池(如Druid或C3P0),确保应用可以高效地访问数据库。 SQL映射文件:使用MyBatis的XML文件或注解配置,将SQL语句与Java对象映射,支持复杂的查询、插入、更新和删除操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值