网站导航
> 文章列表 > 【javascript】脚本执行时间线与多线程，防抖与节流

【javascript】脚本执行时间线与多线程，防抖与节流

网友: 文章列表 2024-03-21 18:41:46

【javascript】脚本执行时间线与多线程，防抖与节流

❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：

文章目录

  • 脚本执行时间线
  • 防抖
  • 节流

脚本执行时间线

  • 在js中，同一个页面中的脚本不会同时有两处正在运行，必须等待当前代码执行完才能执行，那什么叫当前代码执行完呢？简单来说就是当前调用栈的代码都执行完就结束了。这就是为什么页面卡住无法响应的原因；执行js，计算布局（el.offsetwidth），绘制页面，解析DOM，这四件事情只能做一件事情，不能同时做。
  • 浏览器是一个单线程的，多线程单线程我认为是跟编程环境有关，JavaScript本身是单线程的语言，它只能在一个线程中执行任务。但是，HTML5中引入了Web Worker API，可以让JavaScript代码在后台创建多个线程，从而实现多线程。Web Worker API使用了一种特殊的线程模型，即“主线程”和“工作线程”，它们之间通过消息通信来协调任务。工作线程可以执行一些耗时的任务，而不会影响主线程的运行。但需要注意的是，Web Worker API有一些限制，例如工作线程不能访问DOM、不能使用某些全局变量等。
  • js为了弥补多线程的缺陷，使用了异步。

防抖

节流是为了限制函数的执行次数，而防抖是为了限制函数的执行时机。

  • 有些事件会触发的很频繁，例如mousemove事件，鼠标动一下就会触发一次，或者是滚动事件，如果我们每触发一次就会运行一次函数，那页面可能会卡顿；我们其中一种解决方法就是使用setTimeout进行减少操作的次数。
  • 防抖函数就是不去立刻执行某个事件，而是设置一个timeout，如果又重新触发了这个事件，那么就重新开始计时，清除掉前一次的timeout，防抖就是最后一次运行一下【javascript】脚本执行时间线与多线程，防抖与节流【javascript】脚本执行时间线与多线程，防抖与节流
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>function debounce(f, duration) {var prevId;return function (...args) {clearTimeout(prevId);prevId = setTimeout(() => {f.call(this,...args);}, duration);};}window.addEventListener("resize",debounce((e) => {window.resizeTo(600, 600);}, 1000));</script></head><body></body>
</html>

节流

节流是为了限制函数的执行次数，而防抖是为了限制函数的执行时机。

  • 节流就是间隔时间够久就运行，太短了就不运行，频率降低了

【javascript】脚本执行时间线与多线程，防抖与节流

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>function throttle(f, time) {var latestArgs; //保存最近的一次参数，以传给原函数var anpaiguo = false;var lastRunTime = 0;return function (...args) {latestArgs = args;if (Date.now() - lastRunTime > time) {lastRunTime = Date.now();return f.call(this, ...latestArgs);}if (!anpaiguo) {setTimeout(() => {lastRunTime = Date.now();f.call(this, ...latestArgs);anpaiguo = false;}, time);anpaiguo = true;}};}window.addEventListener("resize",throttle((e) => {window.resizeTo(600, 600);}, 1000));</script></head><body></body>
</html>

补充：reduce，filter，map函数
…扩展运算符它可以将一个数组或类数组对象“展开”成一个逗号分隔的列表。在这个例子中（[…new Set(arr)]），…new Set(arr2)将Set对象转换为一个数组，然后将该数组展开成一个逗号分隔的列表。

	var arr = [1, 2, 3]// 计算总数var ret1 = arr.reduce((pre, current)=>{pre += currentreturn pre}, 0)console.log(ret1)  // 6// filter (过滤)var ret2 = arr.filter(item =>{return item > 2})console.log(ret2)  // [3]// map var ret3 = arr.map(item =>{return {id:item}})console.log(ret3)   // [{id: 1}, {id: 2}, {id: 3}]

————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

网络标签：

相关问题