javaScript 防抖函数

一. 防抖函数的定义与使用

防抖函数的定义

function debounce(fn, interval = 300) {
  let timeout = 0;     // timeout占位
  
  return () => {    // 返回闭包函数 timeout保留作用域
    console.log('=====清除==========');
    clearTimeout(timeout);  // 先清除上一个timeout
    timeout = setTimeout(() => {    //重新给timeout赋值，interval时间之后执行cb
      fn.apply(this, arguments);
    }, interval);
  };
}

防抖函数的调用

  
  



  点击测试防抖

二. 防抖函数应用场景

其实在HTML 和javaScript 中防抖函数其实有很多的应用场景:

• 监控页面 img 标签的加载情况, 当img标签的图片下载完成后(即: load后) 对页面进行刷新, 如果html 页面中的每个img标签加载完成图片后就刷新页面, 那么频繁的刷新对性能和用户体验都不是很好, 这时可以使用防抖函数, 防止连续的刷新.

• HTML 中某个按钮, 防止频繁的点击操作, 可以使用防抖函数.

• HTML 页面中的上拉/ 下拉刷新可以使用防抖函数

三. 防抖函数使用注意事项:

1. 防抖函数在使用时, 必须要使用变量引用保住他的命, 否则防抖函数,延迟时间结束后, 防抖函数不会触发对应函数的调用

• 正确做法1:

• 错误的做法

• 正确做饭2

四. 总结防抖函数的使用,就2步:

1. 实例化防抖函数, 并持有防抖函数(说清楚防抖函数做什么, 延时时间是多长 )
2. 调用/触发防抖函数防抖