函数节流/函数防抖/requestAnimationFrame

最新推荐文章于 2024-09-27 23:40:22 发布
最新推荐文章于 2024-09-27 23:40:22 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： 函数节流 函数防抖 requestAnimationFrame
前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ
本文链接：https://blog.csdn.net/XZZ2222/article/details/81048785
版权

函数节流

函数节流：每个固定的时候之内，函数只执行一次

  //代码实现
  window.onload = function () {
    let flag = false;
    document.getElementsByTagName('body')[0].onscroll = function () {
      if(flag){
        return;
      }
      flag = true;
      setInterval(function () {
        console.log('111')
        flag = false;
      },2000)
    }
  }

函数防抖

函数延迟执行：函数执行结束后，2秒后打印一次

//代码实现
window.onload = function () {
  let timer = false;
  document.getElementsByTagName('body')[0].onscroll = function () {
    if(timer){
      clearInterval(timer);
    }
    timer = setInterval(function () {
      console.log('2222')
    },2000)
  }
}

window.requestAnimationFrame()

window.requestAnimationFrame()

  • window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画 该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

  • window.cancelAnimationFrame(requestID) 取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求. requestID是先前调用window.requestAnimationFrame()方法时返回的ID.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin:0;
      padding:0;
    }

    #test {
      width: 200px;
      height: 200px;
      background: green;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin:auto;
    }
  </style>
</head>
<body>
<div id="test"></div>
<script type="text/javascript">

window.onload = function () {
  let i = 0;
  window.requestAnimationFrame(fn);
  function fn() {
    i+=10;
    document.getElementById('test').style.transform = 'translateX('+i+'px)';
    window.requestAnimationFrame(fn);
  }
}

</script>
</body>
</html>

storage

storage事件：

  • Storage 对象发生变化时（即创建/更新/删除数据项时，Storage.clear() 方法至多触发一次该事件）会触发
  • 在同一个页面内发生的改变不会起作用
  • 在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件，与它共享的页面会触发事件)

方法

 key        :  修改或删除的key值，如果调用clear(),为null
 newValue    :  新设置的值，如果调用clear(),为null
 oldValue    :  调用改变前的value值,如果调用clear(),为null
 url         :  触发该脚本变化的文档的url
 storageArea :  当前的storage对象

localStorage和sessionStorage

  • 都是指的本地缓存
  • sessionStorage：会话缓存。生命周期：从打开浏览器到关闭浏览器
  • localStorage：永久的，除非本人删除 5M
  • cookie:4kb
  • 方法：
    • 添加：setItem(key,value)
    • 获取：getItem(key)
    • 删除：removeItem（key)
    • 清除：clear();
    • 注意：只存储JSON数据

数据同步

文件1.html

  window.onload = function () {
document.getElementById('test').onblur = function () {
  let value = this.value;
  localStorage.setItem('VALUE',value);
}
}

文件2.html

  window.addEventListener('storage',function (event) {
console.log(event.newValue);
})

注意:修改文件1中的缓存内容，文件二的控制台中会打印

PromiseXuu
关注
专栏目录
ts防抖节流装饰器
qq_38026437的博客
02-26 1410
/** * 节流 * @param time * @returns */ export function throttle(time: number = 0.3) { return function (target, propertyKey: string, descriptor: PropertyDescriptor) { let oldFun = descriptor.value; let isLock = false; descri.
【进阶 6-6 期】深入篇 | 阿里 P6 必会 Lodash 防抖节流函数实现原理
木易杨的博客
07-03 3289
引言 前面几节我们学习了节流函数 throttle，防抖函数 debounce，以及各自如何在 React 项目中进行应用，今天这篇文章主要聊聊 Lodash 中防抖和节流函数是如何实现的，并对源码浅析一二。下篇文章会举几个小例子为切入点，换种方式继续解读源码，敬请期待。 有什么想法或者意见都可以在评论区留言，欢迎大家拍砖。 防抖函数 debounce Lodash 中节流函数比较简单，直接调用防...
JavaScript 用requestAnimationFrame与定时器做节流
最新发布
白瑕 的博客
09-27 408
requestAnimationFrame每次调用都把其参数函数推入重绘回调的函数队列.在两次重绘间多次调用同一个更新页面视觉效果的函数, 只有最后且最新一次的结果会被绘制，之前调用结果都被覆盖，浪费性能.
节流和防抖的区别
SR003的博客
08-21 603
节流：在规定时间内无论触发多少次，函数只执行一次。防抖：在规定时间内如果有多次触发，函数只会在最后一次触发后的延迟时间内执行。
函数的节流、防抖、requestAnimationFrame（优化性能）
m0_60979337的博客
12-28 633
函数优化性能的做法
requestAnimationFrame实现js防抖
lzc的博客
07-01 568
timer.js const hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function'; const now = hasNativePerformanceNow ? () => performance.now() : () => Date.now(); export function cancelTimeout(timeo
原生JS节流器实现和requestAnimationFrame()节流器实现
一刀的博客
02-12 550
前言 计时器setTimeout()和定时器setInterval()长期以来是JavaScript动画最先进的工具，但是这两者都是在同步代码执行之后,经过给定的延迟后,把任务加入到宏任务队列中， 对于其执行重绘时序，却没有相应的方法，因此Firefox4为其浏览器添加了一个叫requestAnimationFrame()的方法，目前基本得到各大浏览器的支持。 节流器的基本思想是在使得进入任务队列的方法执行完毕之后（或者一定时间后）才允许继续向任务队列加入相同的任务 使用setTimeout() va
js防抖函数和节流函数使用场景和实现区别示例分析
10-15
JavaScript中的防抖函数（debounce）和节流函数（throttle）是优化性能的关键工具，它们常用于处理高频触发的事件，如窗口的resize、scroll事件，输入框的input事件等。这些事件如果不加以控制，可能会导致浏览器...
js代码-防抖节流函数
07-14
在`main.js`文件中，可能会包含使用这些防抖和节流函数的实际应用代码，如事件监听器的处理。`README.txt`可能是对这些代码的简要说明或使用指南。通过阅读和理解这些文件，你可以更深入地了解如何在实际项目中应用...
js代码-节流和防抖
07-14
例如，我们可以创建一个节流函数，它接受一个目标函数和一个时间间隔作为参数： ```javascript function throttle(func, delay) { let timeoutId; return function() { const context = this; const args = ...
vue3.0中，防抖与节流的写法
07-30
节流函数则是在一段时间内只执行一次，无论触发了多少次。它会在指定的时间间隔结束时，保证至少执行一次回调。以下是一个简单的节流实现示例： ```javascript import { throttle } from 'lodash'; // 或者使用...
AsyncIterator:一个使用requestAnimationFrame批量处理大型数据集而不锁定UI的异步迭代器
04-30
AsyncIterator 一个使用requestAnimationFrame批量处理大型数据集而不锁定UI的异步迭代器。 // The dataset var myArr = []; // Number of operations per call var batchSize = 1000; // The actual processing method function work(item, index) { // Do something for each item } // Start iterator, it will return a promise var promise = asyncIterator(myArr, work, batchSize); // When promise is resolved, output results promise.done
浅析JavaScript 函数防抖和节流
10-15
主要介绍了JavaScript 函数防抖和节流的相关资料，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue3单个页面进行防抖节流
weixin_73098736的博客
07-03 333
【代码】vue3单个页面进行防抖节流。
VUE+Typescript（TSX）使用函数防抖、函数节流
一念执着
02-09 513
【代码】VUE+TSX使用函数防抖、函数节流。
vue3 TS防抖函数
qq_33930498的博客
09-06 2838
写VUE3+TS项目时，写到一个模糊查询提示相关信息的功能，没找到合适的防抖函数，利用TS的特性写了一个简单易懂的防抖函数，希望能帮到大家。
节流、防抖函数（TypeScript）
weixin_50368372的博客
08-02 428
节流（throttling）函数是一种在特定时间内只允许某个函数执行一次的技术。它可以用于限制函数执行的频率，例如在滚动、窗口调整大小、鼠标移动等高频事件中使用，避免函数被过多调用，导致性能问题。
使用ts写一个严格类型推断的防抖函数--支持延迟执行，立即执行，成功失败回调和promise返回值
听雨少年的博客
04-04 3068
TS版的防抖函数(严格的类型推断) export function isFunction(obj: any): obj is Function { return typeof obj === "function"; } type fnType<T> = (...args: T[]) => any; type successCallbackType<T = any> = (...args: T[]) => any; type failCallbackType<T
vue3+ts封装全局防抖函数
三拾的博客
06-27 1678
是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，（例如滚动事件、表单重复提交、页面resize事件，常见于需要做页面适配的时候），让某个时间期限内，事件处理函数只执行一次。函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。（3）在需要用到位置（例如某些按钮上），在该按钮的点击事件上，绑定防抖或节流事件的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值