标签搜索
搜索到
46
篇与
的结果
-
如何理解 JS 的异步？ 参考:JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。 -
shopify recently viewed products // Save product ID to localStorage, for use in the 'Recently viewed products' section. {%- if request.page_type == 'product' %} try { const items = JSON.parse(localStorage.getItem('cc-recently-viewed') || '[]'); // If product ID is not already in the recently viewed list, add it to the beginning. if (!items.includes({{ product.id | json }})) { items.unshift({{ product.id | json }}); } // Set recently viewed list and limit to 12 products. localStorage.setItem('cc-recently-viewed', JSON.stringify(items.slice(0, 12))); } catch (e) {} {%- endif %}
-
-
-
防抖与节流 防抖与节流的区别：虽然防抖和节流都是优化高频率事件的方法，但它们有不同的侧重点：防抖（Debouncing）：在特定时间内只执行一次函数，时间段内的重复调用会重新计时。适用于搜索输入、窗口调整大小等事件。节流（Throttling）：限制函数在特定时间内执行的次数。适用于滚动事件、鼠标移动等。<script> function debounce(func, wait) { let timeout; return function (...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); }; } // 定义需要防抖的函数 function handleResize() { console.log('Window resized'); } // 创建防抖函数，设置等待时间为 300 毫秒 const debouncedResize = debounce(handleResize, 300); // 添加事件监听器 window.addEventListener('resize', debouncedResize); // 定义需要防抖的函数 function handleInput(event) { console.log('Input value:', event.target.value); } // 创建防抖函数，设置等待时间为 500 毫秒 const debouncedInput = debounce(handleInput, 500); // 添加事件监听器 // const inputElement = document.querySelector('input'); // inputElement.addEventListener('input', debouncedInput); // 节流函数实现 function throttle(func, wait) { let timeout; let lastRun = 0; return function (...args) { const context = this; const now = Date.now(); if (now - lastRun >= wait) { lastRun = now; func.apply(context, args); } else { clearTimeout(timeout); timeout = setTimeout(() => { lastRun = Date.now(); func.apply(context, args); }, wait - (now - lastRun)); } }; } // 节流函数使用示例 // 定义需要节流的函数 function handleScroll() { console.log('Scrolled'); } // 创建节流函数，设置等待时间为 200 毫秒 const throttledScroll = throttle(handleScroll, 200); // 添加事件监听器 window.addEventListener('scroll', throttledScroll); </script>
-
jquery 点击锚点事件并取消scroll事件，平滑滚动至锚点位置 在jQuery中，如果你想要取消由锚点点击触发的滚动事件，你可以使用event.preventDefault()方法来阻止默认的滚动行为。以下是一个简单的例子：$(document).ready(function(){ $('a[href*="#"]').click(function(event){ // 阻止默认的点击事件 event.preventDefault(); // 获取目标位置 var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); // 执行平滑滚动 if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); } }); });
-
css 滚动条优化问题 假设最外层容器命名为outer，那么特定的这个区域滚动条的优化如下： .outer { width: 200px; height: 200px; border: 1px solid red; display: block; overflow-x: scroll; /* Enable scroll for the y-axis */ overflow-y: hidden; /* Disable scroll for the x-axis */ } .inner { height: max-content; /* Use max-content or a fixed height */ width: max-content; /* Use max-content or a fixed width */ } /* 整个滚动条 */ .outer::-webkit-scrollbar { width: 5px; /* 设置滚动条的宽度 */ height: 5px; /* 设置滚动条的高度 */ } /* 滚动条轨道 */ .outer::-webkit-scrollbar-track { background: #f1f1f1; /* 设置轨道的背景颜色 */ } /* 滚动条的滑块 */ .outer::-webkit-scrollbar-thumb { background: #fc9a41; /* 设置滑块的背景颜色 */ } /* 当鼠标悬停在滑块上 */ .outer::-webkit-scrollbar-thumb:hover { background: #fc9a41; /* 设置滑块在悬停状态下的背景颜色 */ } <div class="outer"> <div class="inner"> test content </div> </div>
-
-
-
javascript 复制粘贴 <script> function sun_copy() { var coupon_code_dom = document.getElementById("coupon-code") var show_copy = document.getElementById("sunshine-copy") var coupon_code = coupon_code_dom.innerText var inp = document.createElement("input") document.body.appendChild(inp) inp.value = coupon_code inp.select() document.execCommand("copy", false) inp.remove() show_copy.innerText = 'Copied' } </script>
