开发者社区> 问答> 正文

介绍一下 js 的节流与防抖?

介绍一下 js 的节流与防抖?

展开
收起
剑曼红尘 2020-04-05 21:35:21 871 0
1 条回答
写回答
取消 提交回答
  • // 函数防抖: 在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。

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

    // 函数防抖的实现 function debounce(fn, wait) { var timer = null;

    return function() { var context = this, args = arguments;

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

    }; }

    // 函数节流的实现; function throttle(fn, delay) { var preTime = Date.now();

    return function() { var context = this, args = arguments, nowTime = Date.now();

    // 如果两次时间间隔超过了指定时间,则执行函数。
    if (nowTime - preTime >= delay) {
      preTime = Date.now();
      return fn.apply(context, args);
    }
    

    }; }

    回答:

    函数防抖是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。

    函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间

    2020-04-05 21:35:49
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
现代Javascript高级教程 立即下载
JS零基础入门教程(上册) 立即下载
Javascript异步编程 立即下载