面试题 节流理解以及实现节流

news/2024/6/17 21:40:45 标签: javascript, 前端

在这里插入图片描述

类似王者荣耀的技能,冷却事件为5s在这5秒中咋点都不会放技能,当五秒过了才能放技能

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>
</head>

<body>
	<button id="btn">点击</button>
</body>

</html>
<script>
	const btn = document.getElementById("btn")
	function log() {
		console.log(Math.random());
	}
	function thro(fn, delay) {
		let time//这时time会被赋值为undefined
		//如果time没有值执行
		return function () {
			//每次点击都会掉let time,要把它放在闭包里,才能保证每次不掉let time
			if (!time) {
				//给time赋一个值,这时time就有值了就不会执行这里的函数
				time = setTimeout(() => {
					fn()
					//  执行完 要把time赋值为null才能继续执行if里面的函数
					//当1秒没过去的时候每次点击time都是有值的,所以不会执行函数,但是等函数
					//执行完了就会把time赋值为null再次点击就会执行函数
					//time = null不能放在外面,settimeout是个异步函数 会先执行time = null
					time = null
				}, delay)
			}
		}
	}
	//onclick要执行的时thro的返回的函数而不是thro函数
	btn.onclick = thro(log, 1000)
</script>

http://www.niftyadmin.cn/n/1371570.html

相关文章

LeetCode-132. 分割回文串 II

LeetCode-132. 分割回文串 II 难度&#xff1a;困难 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是回文。 返回符合要求的 最少分割次数 。 示例 &#xff1a; 输入&#xff1a;s “aab” 输出&#xff1a;1 解释&#xff1a;只需一次分…

面试题 css清除浮动的方法

浮动的产生 1、普通流定位 static&#xff08;默认方式&#xff09; 普通流定位&#xff0c;又称为文档流定位&#xff0c;是页面元素的默认定位方式 页面中的块级元素&#xff1a;按照从上到下的方式逐个排列 页面中的行内元素&#xff1a;按照从左到右的方式逐个排列 但是如何…

LeetCode-516. 最长回文子序列

LeetCode-516. 最长回文子序列 给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 示例 1&#xff1a; 输入&#…

面试题 说一说px em rem的区别

px px单位的名称为像素&#xff0c;它是一个固定大小的单元&#xff0c;像素的计算是针对&#xff08;电脑/手机&#xff09;屏幕的&#xff0c;一个像素&#xff08;1px&#xff09;就是&#xff08;电脑/手机&#xff09;屏幕上的一个点&#xff0c;即屏幕分辨率的最小分割。…

面试题 vue生命周期

beforecreate这时还不能访问data数据和methods方法&#xff0c;初始化生命周期&#xff0c;事件但是数据代理还没有开始 beforecreate之后开始初始化数据代理和数据检测 在进入create生命周期之后就可以访问data中的数据和mothods中的方法 进入beforemount接开始生成虚拟DOM mo…

LeetCode-1143. 最长公共子序列

LeetCode-1143. 最长公共子序列 难度&#xff1a;中等 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变…

面试题 HTTP状态码

200 - 请求成功 301 - 资源&#xff08;网页等&#xff09;被永久转移到其它URL 404 - 请求的资源&#xff08;网页等&#xff09;不存在 500 - 内部服务器错误

LeetCode-62. 不同路径

LeetCode-62. 不同路径 难度&#xff1a;中等 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。…