防抖、节流 ------ 2020-06-19

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行(前沿触发),false 表非立即执行(后沿触发)
 */

  function debounce(func, wait, immediate) {
    let timeout;

    return function () {
      let context = this;
      let args = arguments;

      if (timeout) clearTimeout(timeout);

      if (immediate) {

        var callNow = !timeout; // 定时器不存在

        timeout = setTimeout(() => {
          timeout = null;
          func.call(context, ...args);
        }, wait);

        if (callNow) func.call(context, ...args);

      } else {

        timeout = setTimeout(() => {
          func.call(context, ...args);
        }, wait);

      }
    }
  }
  function test() {
    console.log('测试');
  }
  window.addEventListener('click', debounce(test, 2000, true));

  /**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版(前置触发),2 表定时器版(后置触发)
 */
  function throttle(func, wait, type) {
    if (type == 1) {
      var previouse = 0;
    } else {
      var timeout;
    }

    return function () {
      let context = this;
      let args = arguments;
      if (type == 1) {

        let now = new Date();
        if (now - previouse > wait) {
          func.call(context, ...args);
          previouse = now;
        }

      } else {
        if (!timeout) {
          timeout = setTimeout(() => {
            timeout = null;
            func.call(context, ...args);
          }, wait)
        }
      }
    }
  }
  function test () {
    console.log('测试');
  }
  window.addEventListener('click', throttle(test, 2000, 2));


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容