节流防抖

函数防抖

在事件被触发n 秒后在执行回调,如果在这n秒事件又被触发,则重新计时

函数节流

规定一个时间单位,在这个时间单位内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只能一次性生效

函数防抖的实现

function debounce(fn, wait) {
      const timer = null;
      return function() {
        const context = this;
        args = arguments;
        // 如果此时存在定时器,则取消之前的定时器重新计时
        if (timer) {
          clearTimeout(timer);
          timer = null;
        }
        // 设置定时器,使事件间隔指定事件后执行
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, wait)
      }
    }

函数节流的实现

function throttle(fn, delay) {
      const  content = this;
      args = arguments;
      const nowTime = Date.noew();
      
      // 如果两次时间间隔超过了指定时间则执行函数
      if(nowTime - preTime >= delay) {
        const preTime = Date.now();
        return fn.apply(content, args);
      }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 先来一张图: 每一条竖线都代表着一次函数调用(如鼠标mousemove事件,input输入事件等)正常执行的时候,...
    啊灿2580阅读 177评论 0 0
  • 标签:debounce throttle iplas 小编在偶然浏览Javascript技术贴吧时候,偶然看到节...
    傑仔阅读 537评论 0 2
  • 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段有时在给DOM绑定事件时,有些事件我们是无法控制触发频...
    yanliting阅读 235评论 0 1
  • 一.什么是函数防抖&节流 函数防抖函数防抖(debounce):在事件被触发n秒后再执行回调,如果在这n秒内又被触...
    王蕾_fd49阅读 440评论 0 1
  • 函数节流与防抖在操作dom的时候很实用。比如用户在点击提交按钮时,防止用户重复点击导致多次提交一样的数据,为了限制...
    写前端的大叔阅读 311评论 0 0