我给KTV服务生讲解防抖,他竟然听懂了

端午节三天假期,的最后一天,我和朋友闲来无事,想着去唱会儿歌吧,好久不唱了,于是吃了午饭,石景山就近找了一家KTV,我们团好了卷就过去了。

装修还算不错,很快找到服务生,我们进了屋子,选好了果盘,一切就绪后,我们就开始欢唱。他点了一首《小星星》,我点了一首《123木头人》。当我们唱完这两首歌后,服务生进来了,端着果盘和饮料,并说有事情随时叫我们,墙上有门铃,一按我们就会过来的。我说好的。

防抖举例

当他快要离开房间的时候,我看他衣兜里好像装着一个东西,像是一本书。我说:小哥,挺爱学习呀,上班还看书。他嘿嘿一乐,漏出了非常洁白的牙齿,那牙齿令人羡慕。他这个时候从衣兜里拿出那本书,不好意思的说:这个行业部景气,我想着学一学找工作呢。我一看,是一本《Vue书籍》,很火爆的一本书。

我问,看多久了?他说,有一段时间了,我之前看了HTML、CSS、Javascript相关书籍,还利用业余时间做了几个项目,觉得挺不错的,自己毕业后,一直想着干开发,但刚开始觉得这个更有前途,于是选择了干这个。但这段时间不太景气,很多KTV都关门了,于是想干一段时间前端开发,试试。我说,不错。

我说:我也是一名前端开发,我们算是同行了。来,你说说,你学到哪里了,我们一起学习。

他说,我学到防抖了。

我说:哦?来,你说说,什么是防抖?

他随口来了一段:防抖就像坐电梯,当有人10秒进来了后,按了一下向上的电梯,他就会停止工作,要等到10秒后没人进来,他才会关门往上走。如果这10秒又有人进来,他就又要等10秒。

我说:你还知道其他例子吗?

他说:不知道了。

我说:你这样去面试不行啊。

他说:为什么呢?

我说:你这个例子是从网上看到的吧。

他说:是。

我说:因为这个例子都被大家知道了,你不能再用坐电梯为例子去描述防抖了,大家都知道的,你就没有自己的理解,你得说一些日常项目开发中的现实一些的例子,这样才更有说服力。

他说:那我说啥呢?

我说:你就说你做过的KTV调度系统。当客户在房间内按门铃,如果多次频繁的按,服务端只响应一次,以最后一次为准。防止用户手抖多次的按,服务端一直报警的响应。当用户按的不是那么频繁,间隔3秒以上再按,就会他按几次,服务端那边响应几次。这个例子,你再结合你日常的工作内容,一点不会有人跟你说的一样的,这样一来,面试官就会觉得你是真的有项目经验。

他说:真棒,那帮我看看代码吧。

我问:你这里还有电脑?

他说:你等着。

高效实现 

过了一小会儿,他端着电脑进来了。说:你帮我看看代码。我一看,哦,这是一个Vue项目,而且用到了防抖,是一个很普通的输入框频繁输入的示例。我说:你写的不错啊。他挠了挠头说:从网上找的代码,挺好用的。我说:我给你说个高效实现防抖的方案。

你面试的时候,说了刚才那段话,然后面试官很可能会让你手写防抖的代码。这些你都练熟了,然后再给面试官展现一下你的高效实现的方案,让面试官眼前一亮。他说:他真的能眼前一亮?我说真的。然后我让他打开了一个Vue的项目,随便新建了一个Vue组件。我说,你按我如下步骤去操作。他说:好的。

安装js-tool-big-box工具库

这是一个高效、实用、便捷、全面的JS工具库。

npn install js-tool-big-box

然后引入eventBox对象 
import { eventBox } from 'js-tool-big-box';
高效实现防抖代码 
<template><div><input @keyup="handleChange" v-model="inputVal" /></div>
</template><script>
import { eventBox } from 'js-tool-big-box';export default {name: 'dj',data () {return {inputVal: ''}},created() {this.myDebounce = eventBox.debounce((data) => {this.sendAjax(data);}, 2000);},methods: {handleChange(event) {const val = event.target.value;this.myDebounce(val);},sendAjax(data) {console.log('发送时间::', new Date().getTime());console.log('发送请求:', data);},}
}
</script>
效果展示 

我说:你输入12223333,然后输入1以后间隔2秒钟,输入最后一个2的时候间隔2秒钟,输入最后一个3的时候,间隔2秒钟。然后清空,再特别快的把这些数字都输入进去。看看效果。

然后他告诉我说:如果我把数字都输入进去,打印了 12223333。如果像第一次那样输入,会打印3次,分别是1 1222 和 12223333。的确是达到了防抖的效果,真是太好用了。

最后

最后,一顿操作之后,我和朋友发现,团了3个小时的券,现在就只有半个小时了。服务生说:哥,没事,我再送你5个小时的,让你唱歌够。另外,再送你10个果盘,让你吃个够。我说,要不给我换个大包吧。他说:今天客户多,我去看看。过了一会儿,他回来了,说:正好有个大包,哥,你们去这边吧。我说:好的。

老板的需求

我和朋友正在欢唱,刚唱完那首《来来来,再喝一杯》的时候,KTV老板来了,他说:我们想要一个抽奖功能,就是录入一些人,然后随机抽出来,一些幸运用户,然后我们会给这些幸运用户发一些小礼品。听小张说,你的那个js-tool-big-box挺好用的,这里面有没有这个功能啊。我说有的,然后我拿着小张的电脑演示了一遍:

import { dataBox } from 'js-tool-big-box';
data () {return {peopleData: '张三0, 张三1, 张三2, 张三3, 张三4, 张三5, 张三6, 张三7, 张三8, 张三9, 张三10, 张三11, 张三12, 张三13, 张三14, 张三15, 张三16, 张三17, 张三18, 张三19, 张三20, 张三21, 张三22, 张三23, 张三24, 张三25, 张三26, 张三27, 张三27, 张三29, 张三30, 张三31, 张三32, 张三33, 张三34, 张三35, 张三36, 张三37, 张三38, 张三39, 张三40',luckPeople: [],}},
this.luckPeople = dataBox.luck(this.peopleData, 3);

我问:老板,是这样的功能吗?如果你要的话,需要把界面优化优化。老板说:好的,非常好,正是我需要的功能。稍后,给你30000块钱,你帮我做这样一个页面吧。我说好的。

然后我们唱完了就出去了,走出去3公里了,老板开着他的奔驰追上我说:夏天热了,给你一瓶冰镇饮料吧,你的JS工具库挺好用的。我说:好的,我会继续努力的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/346707.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day 43 keepalived高可用集群

keepalived高可用集群 负载均衡 lb集群 load balance ​ 流量分发 高可用 ha集群 high availability ​ 主要是给服务器做冗余 keepalive 持久连接 保持存活 keepalived 高可用软件名称 红帽有自己的高可用集群套件&#xff1a;RHCS keepalived介绍 ​ keepalived是集…

【浏览器清空证书】

chrome://net-internals/#hsts 在地址栏输入并访问&#xff1a;chrome://net-internals/#hsts

[AI Omost] 革命性AI图像合成技术,让你的创意几乎一触即发!

介绍 Omost 是一个创新的项目&#xff0c;它利用大型语言模型&#xff08;LLM&#xff09;的编码能力来生成图像&#xff0c;特别是通过图像合成技术。项目的名称“Omost”发音类似于“almost”&#xff0c;寓意着使用该项目后&#xff0c;用户的图像生成工作几乎可以完成。同…

bbbike下载OSM路网数据后使用GraphHopper离线进行路径规划

一、bbbike下载OSM路网数据 BBBike extracts OpenStreetMap (OSM, Garmin, Shapefile etc.) 二、GraphHopper离线搭建 GraphHopper是一种快速且内存有效的Java导航引擎&#xff0c;默认使用OSM和GTFS数据&#xff0c;也可导入其他的数据源。支持CH&#xff08;Contraction Hi…

如何提高逻辑性?(小妙招)

在现代社会中&#xff0c;逻辑性是一种至关重要的思维能力。不论是在工作、学习还是生活中&#xff0c;逻辑清晰的人总能更好地解决问题和做出决策。然而&#xff0c;如何提高逻辑性却是许多人头疼的问题。本文将从六个方面详细探讨如何提升逻辑性&#xff0c;包括细心态度、逼…

网页宽度现在右侧有一个竖条空白,怎么啦车网站都没办法完全铺满宽度,怎么回事怎么解决

问: 网页宽度怎么设置全覆盖 回答: 经过检查,发现 是这个网站的最外层html标签设置了宽度,所以导致,当我们删除html的宽度后就解决了这个问题.

大模型基础——从零实现一个Transformer(1)

一、Transformer模型架构图 主要模块&#xff1a; embedding层&#xff1a; Input/Output Embedding&#xff1a; 将每个标记(token)转换为对应的向量表示。 Positional Encoding&#xff1a;由于没有时序信息&#xff0c;需要额外加入位置编码。 N个 block堆叠: Multi-Head …

Spring Boot 使用自定义注解和自定义线程池实现异步日志记录

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

树-二叉树的最大路径和

一、问题描述 二、解题思路 因为各个节点的值可能为负数&#xff0c;初始化res(最大路径和)的值为最小整数&#xff1a;Integer.MIN_VALUE 我们这里使用深度遍历&#xff08;递归&#xff09;的方法&#xff0c;先看某一个子树的情况&#xff1a; 这里有一个技巧&#xff0c;…

纷享销客安全体系:安全运维运营

安全运维运营(Security Operations,SecOps)是指在信息安全管理中负责监控、检测、响应和恢复安全事件的一系列运营活动。它旨在保护组织的信息系统和数据免受安全威胁和攻击的损害。 通过有效的安全运维运营&#xff0c;组织可以及时发现和应对安全威胁&#xff0c;减少安全事…

【Linux文件篇】系统文件、文件描述符与重定向的实用指南

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#xff1a;相信大家对文件都不会太陌生、也不会太熟悉。在没有学习Linux操作系统时&#xff0c;我们在学习C或C时都学过如何去创建、打开、读写等待文件的操作&#xff0c;知道一些语言级别的一些接口与函数。但…

【Pytorch】一文向您详细介绍 torch.tensor() 的常见用法

【Pytorch】一文向您详细介绍 torch.tensor() 的常见用法 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通…

盲盒小程序推广与运营策略的挑战

随着盲盒经济的兴起&#xff0c;越来越多的商家开始关注并尝试开发盲盒小程序。然而&#xff0c;在推广和运营盲盒小程序的过程中&#xff0c;我们也不可避免地会遇到一些挑战。下面&#xff0c;我将就用户获取、留存以及活跃度提升等方面&#xff0c;探讨这些挑战及可能的应对…

【Linux】生产者消费者模型——阻塞队列BlockQueue

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;理解【Linux】生产者消费者模型——阻塞队列BlockQueue。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安!…

【网络安全】网络安全基础精讲 - 网络安全入门第一篇

目录 一、网络安全基础 1.1网络安全定义 1.2网络系统安全 1.3网络信息安全 1.4网络安全的威胁 1.5网络安全的特征 二、入侵方式 2.1黑客 2.1.1黑客入侵方式 2.1.2系统的威胁 2.2 IP欺骗 2.2.1 TCP等IP欺骗 2.2.2 IP欺骗可行的原因 2.3 Sniffer探测 2.4端口扫描技术…

知识付费小程序源码系统 一键拥有属于自己的知识店铺 带完整的安装代码包以及搭建教程

系统概述 在数字化时代&#xff0c;知识已成为最具价值的资产之一。随着互联网技术的飞速发展&#xff0c;知识付费市场迎来了前所未有的发展机遇。为了帮助广大内容创作者、教育机构及个人轻松搭建专属的知识店铺&#xff0c;一款高效、易用的知识付费小程序源码系统应运而生…

架构设计-用户信息及用户相关的密码信息设计

将用户的基本信息和用户密码存放在不同的数据库表中是一种常见的安全做法&#xff0c;这种做法旨在增强数据的安全性和管理的灵活性。以下是这种做法的几个关键原因&#xff1a; 安全性增强&#xff1a; 当用户密码被单独存放在一个表中时&#xff0c;可以使用更强大的加密和哈…

超详解——Python模块文档——基础篇

目录 1. Unix起始行 示例&#xff1a; 2. 对象和类型 示例&#xff1a; 3. 一切都是对象 示例&#xff1a; 4. 理解对象和引用 示例&#xff1a; 5. 理解对象和类型 示例&#xff1a; 6. 标准类型 示例&#xff1a; 7. 其他内建类型 示例&#xff1a; 8. 类型的类…

东南亚电商Tiki、Qoo10:如何用自养号测评提升产品曝光和销量

随着互联网的普及和全球化的推进&#xff0c;跨境电商在东南亚地区日益繁荣。Tiki、Qoo10作为该地区的电商巨头&#xff0c;不仅吸引了大量消费者&#xff0c;也成为了卖家竞相角逐的战场。为了在这场竞争中脱颖而出&#xff0c;卖家们纷纷采用测评这一方式来提升产品销量。本文…

弱智吧”,人类抵御AI的最后防线

“写遗嘱的时候错过了deadline怎么办&#xff1f;” “怀念过去是不是在时间的长河里刻舟求剑&#xff1f;” “英语听力考试总是听到两个人在广播里唠嗑&#xff0c;怎么把那两个干扰我做题的人赶走&#xff1f;” 以上这些饱含哲学但好像又莫名其妙的问题&#xff0c;出自…