js手写——防抖

js手写打卡Day01

js 复制代码
// 事件触发后等待n秒才执行,期间如果重新触发就重新计时
// 每次触发清除一个定时器,再设置定时器

// 尾执行
const debounce = (fn,delay) => {
  let timer = null;
  return function(...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this,args);
      },delay)
  }
}

/* const log = debounce(()=> console.log('hello world'),1000);
log();
log();
log();
 */
// 立即执行
// 在尾执行的基础上加一个首执行
const debounce2 = (fn, delay, immediate) => {
  let timer = null;
  if (immediate === false) {
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    }
  } else {
    return function (...args) {
      if (!timer) {
        fn.apply(this, args);
      }
      clearTimeout(timer);
      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  }
}

const log = debounce2(()=> console.log('hello world'),1000,false);
log();
log();
log();
相关推荐
2301_773643622 分钟前
ceph镜像
前端·javascript·ceph
程序员黑豆24 分钟前
AI全栈开发之Java:什么是JDK
前端·后端·ai编程
To_OC24 分钟前
万字解析《JS语言精粹》之第四章:函数15大核心精髓(JS灵魂核心)
前端·javascript·代码规范
宋拾壹27 分钟前
同时添加多个类目
android·开发语言·javascript
IT知识分享32 分钟前
从零开发在线简繁转换工具:OpenCC 实战、避坑经验与方案选型
javascript·python
mqcode34 分钟前
Vue3 + Element Plus + Vite 企业级后台框架搭建全流程
前端
SL-staff36 分钟前
Web 白板技术架构深度解析:从渲染到协作的选型哲学
前端·架构
川冰ICE39 分钟前
JavaScript实战④|天气查询应用,调用API与异步处理
javascript·css·css3
微扬嘴角39 分钟前
react篇4--setState、LazyLoad和Hooks
前端·javascript·react.js
凡人叶枫1 小时前
Effective C++ 条款04:确定对象被使用前已先被初始化
java·linux·开发语言·c++·嵌入式开发