防抖&节流

简介: 防抖&节流

防抖

在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行

防抖实现

注意以下几点

  1. this 的指向
  2. 是否可以立即执行
  3. 函数的参数问题
  4. 函数具有返回值的问题
  5. 添加取消功能
function debounce(func, wait, immediate) {
  var timeout, result;

  var debounced = function () {
    var context = this;
    var args = arguments;

    if (timeout) clearTimeout(timeout);
    if (immediate) {
      // 如果已经执行过,不再执行
      var callNow = !timeout;
      timeout = setTimeout(function () {
        timeout = null;
      }, wait);
      if (callNow) result = func.apply(context, args);
    } else {
      timeout = setTimeout(function () {
        func.apply(context, args);
      }, wait);
    }
    return result;
  };

  debounced.cancel = function () {
    clearTimeout(timeout);
    timeout = null;
  };

  return debounced;
}

节流

持续触发事件,每隔一段时间,只执行一次事件。

节流实现

// 第四版
function throttle(func, wait, options) {
  var timeout, context, args, result;
  var previous = 0;
  if (!options) options = {};

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

  var throttled = function () {
    var now = new Date().getTime();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
  };
  throttled.cancel = function () {
  clearTimeout(timeout);
  previous = 0;
  timeout = null;
};
  return throttled;
}
目录
相关文章
|
SQL 存储 自然语言处理
数据库原理第三章课后题答案(第四版)
数据库原理第三章课后题答案(第四版)
428 0
|
消息中间件 Java Kafka
【RabbitMQ】RabbitMQ快速入门 通俗易懂 初学者入门
【RabbitMQ】RabbitMQ快速入门 通俗易懂 初学者入门
385 0
|
JavaScript
JS防抖函数的实现(巨详细,秒懂)
JS防抖函数的实现(巨详细,秒懂)
690 0
|
前端开发 JavaScript
纯前端用XLSX库导出excel,可含多个sheet
纯前端用XLSX库导出excel,可含多个sheet
875 0
|
Web App开发 缓存 JavaScript
Chrome浏览器清除页面js文件缓存的方法
Chrome浏览器清除页面js文件缓存 Chrome浏览器清除js缓存方法虽然简单,但有些人还是不太会,有些人会去设置里面清除有时候没有用,这里写一下简单步骤,使用一次以后就会了,而且...
5307 0
【分享】宜搭抽屉内嵌入表单,表单提交后自动隐藏抽屉
抽屉内嵌入表单,表单提交后自动隐藏抽屉
723 1
|
SQL Oracle 关系型数据库
[已解决]mysql查询一周内的数据,解决一周的起始日期是从星期日(星期天|周日|周天)开始的问题
[已解决]mysql查询一周内的数据,解决一周的起始日期是从星期日(星期天|周日|周天)开始的问题
|
JavaScript
【分享】宜搭js代码验证组件校验结果(触发组件校验)
有时候需要手动触发校验,特别是自定义页面,校验通过才进行下一步 by 页一
1372 1