js的防抖,节流,深拷贝和浅拷贝

防抖(Debounce)函数:

防抖函数会在一段连续的触发事件停止后执行一次,用于防止频繁触发事件造成性能问题。

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 用法示例
const debouncedFunction = debounce(() => {
  console.log("防抖函数被触发");
}, 1000);

// 在某个事件上绑定防抖函数
document.addEventListener("mousemove", debouncedFunction);

节流(Throttle)函数:

节流函数会在一段时间内最多执行一次,用于限制事件的触发频率。

function throttle(func, delay) {
  let isThrottled = false;
  return function (...args) {
    if (!isThrottled) {
      func.apply(this, args);
      isThrottled = true;
      setTimeout(() => {
        isThrottled = false;
      }, delay);
    }
  };
}

// 用法示例
const throttledFunction = throttle(() => {
  console.log("节流函数被触发");
}, 1000);

// 在某个事件上绑定节流函数
window.addEventListener("scroll", throttledFunction);

深拷贝(Deep Copy)和浅拷贝(Shallow Copy):

深拷贝会复制对象及其嵌套的所有子对象,而浅拷贝只会复制对象的引用。

浅拷贝示例:
const sourceObj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, sourceObj);

sourceObj.b.c = 3;
console.log(shallowCopy.b.c); // 输出 3,因为是浅拷贝,引用相同

引用相同

深拷贝示例:
 

function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  let copy;
  if (Array.isArray(obj)) {
    copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i]);
    }
  } else {
    copy = {};
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
  }

  return copy;
}

const sourceObj = { a: 1, b: { c: 2 } };
const deepCopiedObj = deepCopy(sourceObj);

sourceObj.b.c = 3;
console.log(deepCopiedObj.b.c); // 输出 2,因为是深拷贝,复制了对象的副本
 

的副本

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中的防抖节流是为了控制函数的执行频率,以提高性能和优化用户体验。 防抖(debounce)是指在一定的时间间隔内,只执行最后一次操作。引用提供了一个自定义的防抖函数示例。该函数接受两个参数:待执行的函数和延迟时间。在函数调用时,如果在延迟时间内再次触发了函数调用,则会清除之前的定时器,重新设置一个新的定时器,以延迟函数的执行。 节流(throttle)是指在一定的时间间隔内,限制函数的执行频率。引用和提供了两个不同的节流函数示例。这些节流函数都可以指定一个时间间隔,只有在这个时间间隔内函数没有被执行过才能继续执行。其中,引用实现了一个基于定时器的节流函数,而引用则是一个基础版的节流函数,使用了时间戳来判断是否达到执行条件。 需要注意的是,防抖节流可以根据具体的需求和场景来选择使用,以达到更好的效果。防抖适用于需要等待用户停止操作后才执行的场景,而节流适用于需要限制函数执行频率的场景。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [JavaScript 防抖节流的实现](https://blog.csdn.net/weixin_43853746/article/details/122654312)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [【JavaScript防抖(debounce)、节流(throttling)](https://blog.csdn.net/qq_46658751/article/details/123386755)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值