requestIdleCallback 实现闲时定时器

requestIdleCallback 实现闲时定时器如果你需要实现一个类似 idleTimeout(()=>{},100)的闲时定时器,即在浏览器空闲时执行任务,并且任务的执行时间间隔为 100ms,可以使用 requestIdleCallback 结合时间控制来实现。实现思路使用 requestIdleCallback:在浏览器空闲时执行任务。控制时间间隔:使用一个变量记录上一次执行的时间,确保任务的执行间

nodejs 运行脚本

nodejs 运行脚本//调用函数示例//runScript(['/bin/bash','/data/demo.sh'],'192.168.1.100','8080');//runScript('python','/data/demo.py','192.168.1.100','8080','arg3','arg4','arg5');//runScript('php','/data/demo.php',

nodejs 以 app 模式启动 chrome

nodejs 以 app 模式启动 chromeconst{spawn}=require('child_process');//根据你的操作系统更改下面的路径 constchromePath=process.platform==='darwin'///Applications/MicrosoftEdge.app/Contents/MacOS/MicrosoftEdge?'/Applications/Googl

mouseover 防误碰

mouseover 防误碰在 JavaScript 中,处理 mouseover​事件时,如果需要防止误触发(例如,用户快速移动鼠标或无意间触发),可以采取几种策略来优化用户体验。使用 setTimeout​来延迟执行 mouseover​的回调函数。如果用户在指定的时间内没有保持鼠标不动,则不会触发事件。lettimeoutId;element.addEventListener('mouseover',fun

js 简单拖动 div 示例

js 简单拖动 div 示例 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title> 简单拖动示例 </title><style>.container{border:1pxsolid#000;width:20

js 的同步加载

js 的同步加载在浏览器环境中,动态加载脚本(如通过 document.createElement('script')​)是异步的,无法直接改为同步执行。这是因为浏览器的设计决定了脚本加载必须是异步的,以避免阻塞页面渲染和其他操作。不过,如果你需要实现类似“同步加载”的效果,可以通过以下方法模拟:方法 1:使用 async:false​的 XMLHttpRequest​或 fetch​通过 XMLHttpRequ

js 深拷贝

js 深拷贝在 JavaScript 中,深拷贝(deepcopy)是指创建一个对象的副本,使得副本中的所有属性和嵌套对象都是独立于原始对象的新实例。这意味着修改副本不会影响原始对象,反之亦然。由于 JavaScript 中的对象是引用类型,默认情况下赋值或浅拷贝只会复制引用而不是实际的数据结构,因此我们需要特别处理以实现深拷贝。以下是几种常见的实现深拷贝的方法:1.使用 JSON.parse 和 JSON.str

js 动态调用函数

js 动态调用函数在闭包中,如果 onFinished​和 sayHello​是闭包内的局部函数,而不是全局函数或对象方法,那么直接通过函数名(字符串)调用会变得复杂,因为闭包内的函数无法通过 window​或全局对象访问。以下是几种在闭包中实现动态调用函数的方法:1.使用函数映射(推荐)在闭包中维护一个函数映射表(对象),将函数名与函数本身关联起来。functioncreateClosure(){//闭包

js 加密和解密

js 加密和解密 window.crypto.subtle(也称为 crypto.subtle)提供了加密和解密字符串的能力,但请注意,它是一个低级别的 API,需要你自己处理密钥管理、编码转换等工作。下面是一个简单的例子,展示如何使用 AES-GCM 模式来加密和解密字符串。这里实现这样的效果 functionencrypt(key='string',data='string');functiondecrypt

js 不使用包裹元素的情况下将字符串转换为 HTML 元素对象

js 不使用包裹元素的情况下将字符串转换为 HTML 元素对象在 JavaScript 中,如果你想直接将一个字符串转换为 HTML 元素对象,而不使用额外的包裹元素(如 div​),可以使用 DOMParser​API。DOMParser​可以将字符串解析为 DOM 文档,然后你可以从中提取所需的元素。以下是实现代码:constbuttonString=`<spandata-height="0"data-width="

js 判断所处平台

js 判断所处平台//返回 android,ipad,iphone,macos,windows,AndroidTablet,linuxfunctiongetPlatform(){constuserAgent=window.navigator.userAgent;letdetectedPlatform=null;if(/iPhone/i.test(userAgent)&&!/iPad/i.test(use

Canvas 从入门到劝朋友放弃(图解版)✨

Canvas 从入门到劝朋友放弃(图解版)✨
Canvas 从入门到劝朋友放弃(图解版)✨Canvas 从入门到劝朋友放弃(图解版)✨-SegmentFaulthttps://segmentfault.com/a/1190000042211619#item-11 本文简介点赞 + 关注 + 收藏=学会了在前端领域,如果只是懂 Vue 或者 React,未来在职场的竞争力可能会比较弱。根据我多年在家待业经验来看,前端未来在...2024-12-0407:38:24​

JavaScript worker 进程通信

JavaScriptworker 进程通信在 JavaScript 中,Worker​是运行在独立线程中的,无法直接访问主线程的全局变量或 DOM。为了实现 Worker​与主线程之间的通信,以及 Worker​之间的通信,可以使用以下几种方式:1.​Worker​​与主线程之间的通信使用 postMessage​和 onmessage​​​postMessage​​:用于发送消息。​​onmessage​​:用于

ResizeObserver 监听容器大小变化

ResizeObserver 监听容器大小变化//使用 ResizeObserver 监听容器大小变化 constresizeObserver=newResizeObserver(()=>{myChart.resize();});resizeObserver.observe(document.getElementById('chart-container'));‍除了 ResizeObserver​,还有其他

bind 参数

bind 参数在 JavaScript 中,Function.prototype.bind​方法用于创建一个新的函数,并将指定的参数预设到原函数中。它的语法如下:function.bind(thisArg,arg1,arg2,...)参数解析​​thisArg​​:这是新函数调用时的 this​值。如果不需要修改 this​,可以传入 null​或 undefined​。​​arg1,arg2,...​​:这些是

console.log 也能插图!!!第一个例子是西瓜视频的控制台,输出一张图片。 第二个例子是 bilibili 的控制台, - 掘金

console.log 也能插图!!!第一个例子是西瓜视频的控制台,输出一张图片。 第二个例子是 bilibili 的控制台, - 掘金
console.log 也能插图!!!第一个例子是西瓜视频的控制台,输出一张图片。第二个例子是 bilibili 的控制台,-掘金 console.log 也能插图!!!第一个例子是西瓜视频的控制台,输出一张图片。第二个例子是 bilibili 的控制台,-掘金 https://juejin.cn/post/6913554505841770509 第一个例子是西瓜视频的控制台,输出一张图片。第二个例子是 bilibil

insertAdjacentHTML

insertAdjacentHTMLseehttps://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML​​insertAdjacentHTML()​​方法将指定的文本解析为 Element​元素,并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的

grid 布局生成奇偶行选择器

grid 布局生成奇偶行选择器//生成奇数行和偶数行的选择器 functiongenerateSelectors(colNum){letevenSelectors=[];//偶数行的选择器 letoddSelectors=[];//奇数行的选择器//生成偶数行的选择器 for(letk=1;k<=colNum;k++){evenSelectors.push(`div:nth-child(${2*colNum