web前端

【经典面试题】js防止重复点击、防止点击过快的方法

若用户疯狂点击提交按钮,请求很多次,生成好多条数据,为了解决这种问题,通常采用以下两种简单两种方法

1.可以添加一个开关,让这个开关默认为true,第一次点击将其变为false,点击事件的执行需要判断这个开关是否为true(例如有了请求结果然后在设置为true),为true执行,false不执行

    var isclick = true;
    function fn(){
        if(isclick){
            isclick = false;
            //下面添加需要执行的事件
                ...
            console.log('点击事件');
            
        }
    }

2.防止点击过快,还可以设置定时器,让在一定时间后,自动将开关变为true,变多次执行为一段时间内的一次执行

var oldtime = '';
function preventclick(msc){
	if(oldtime==''){
		oldtime = new Date().getTime();
		return true;
	}else{
		var newtime = new Date().getTime();
		if(newtime - oldtime 

JavaScript Promises:简介

Promise 简化了延迟和异步计算。Promise 代表一个尚未完成的操作。

 

诸位开发同仁,请准备迎接 Web 开发史上的重大时刻。

[鼓声响起来]

Promise 已经来到了 JavaScript

[璀璨的烟花在天上亮起,五彩纸屑纷纷落下,人们为之疯狂]

此时此刻,您会是下列几种人之一:

  • 大家在周围欢呼,但您根本不知道这是为了什么。也许您甚至不知道这个 promise 到底是什么东西。您耸了耸肩,但肩上却感到了五彩纸屑的重量。假如是这样,请别担心,我花了很长时间才弄清楚它的重要性。您可能想从头开始了解。
  • 您兴奋地挥出一拳!可算等到了!您之前已经用过这些 Promise,但让人苦恼的是,所有的实现都采用略有不同的 API。官方 JavaScript 版本的 API 是什么?您可能想从术语开始。
  • 您对它已经有所了解了,对那些上蹿下跳的新人嗤之以鼻。花点时间享受下您的优越感,然后直接前往 API 参考吧。

Progressive web apps 渐进式 Web 应用程序 (PWA)

渐进式 Web 应用程序(PWA) 是使用 service workersmanifests和其他 Web 平台功能与渐进式增强相结合的 Web 应用程序,为用户提供与本机应用程序同等的体验。

PWA 为用户提供了许多优势——包括可安装逐步增强响应式设计、可重新参与、可链接、可发现独立于网络安全

PWA 操作指南和其他文档

这些介绍性材料和分步指南将引导您了解构建 PWA

如何保持网页图像的纵横比:aspect-ratio vs width & height 属性

默认情况下,an<img>占用零空间,直到浏览器加载足够的图像以知道其尺寸:

一只黑猫,看着镜头,在他的背上滚动
塞纳猫

运行演示时,您会<figcaption>立即看到。然后,几秒钟后,这一段和随后的页面内容向下移动,为图像腾出空间。这使得用户体验非常令人沮丧,因为内容从用户的眼睛/手指/指针下方移出。

十多年来,我们不得不使用愚蠢的技巧来手动应用纵横比,然后,典型的,两个更好的解决方案几乎同时出现。它们是 CSSaspect-ratiowidth&height表示性提示。

那么,您应该使用哪个?首先,让我们看看这些功能是如何工作的,因为那里有很多错误信息……

CSS 纵横比

如果你这样做:

.aspect-ratio-demo {
  aspect-ratio: 16 / 9;
}

......你得到这个:

16 / 9

该功能于 2021 年末登陆 Safari 15 …

为什么您的网页大小应小于 14KB

也可以在dev.to上阅读(警告它远大于 14kB)

拥有一个较小的网站可以使其加载速度更快——这并不奇怪。

令人惊讶的是,一个14kB页面的加载速度比一个15kB页面快得多——也许更快——而一个页面和一个页面612ms之间的区别是微不足道的。15kB16kB

这是因为TCP 慢启动算法。本文将介绍它是什么,它是如何工作的,以及为什么你应该关心。但首先我们将快速回顾一些基础知识。

    

理解异步 JavaScript-学习JavaScript是怎么工作的

 

理解异步 JavaScript

学习 JavaScript 是怎么工作的

照片来自 Unsplash 的作者 Sean Lim

JavaScript 是一种单线程编程语言,这意味着同一时间只能完成一件事情。也就是说,JavaScript 引擎只能在单一线程中处理一次语句。

单线程语言简化了代码编写,因为你不必担心并发问题,但这也意味着你无法在不阻塞主线程的情况下执行网络请求等长时间操作。

想象一下从 API 中请求一些数据。根据情况,服务器可能需要一些时间来处理请求,同时阻塞主线程,让网页无法响应。

这也就是异步 JavaScript 的美妙之处了。使用异步 JavaScript(例如回调,Promise 或者 async/await),你可以执行长时间网络请求同时不会阻塞主线程。

虽然您没有必要将所有这些概念都学会成为一名出色的 JavaScript 开发人员,但了解这些对你会很有帮助 🙂…

使用async属性异步加载执行JavaScript

HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的。比如,我以前一直在使用placeholders,但以前必须要用JavaScript实现。而HTML5里给JavaScript标记提供的async属性,使JavaScript能异步加载执行。之前我需要各种的JavaScript插件来实现这种功能,但现在这个新属性能让我们轻松的实现异步加载。…

        

写好 JavaScript 异步代码的几个推荐做法

今天给大家来推荐几个写好 JavaScript 异步代码的推荐做法,每种场景都有一个对应的 eslint 规则,大家可以选择去配置一下。

no-async-promise-executor

不建议将 async 函数传递给 new Promise 的构造函数。

// ❌
new Promise(async (resolve, reject) => {});

// ✅
new Promise((resolve, reject) => {});

首先,你在 Promise 的构造函数里去使用 async ,那么包装个 Promise 可能就是没啥必要的。另外,如果 async 函数抛出了异常,新构造的 promise 实例并不会 reject ,那么这个错误就捕获不到了。…