本文已参与「新人创作礼」活动．一起开启掘金创作之路
1.防抖
防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
场景：搜索框输入发请求，一些拖拽盒子，或者滚动事件
防抖的实现：利用间歇函数
const timer =setTimeout(callback函数，间隔时间) //执行完会返回自身的这个定时器的编号
//事件所触发的函数
clickFn(){
//先清除timer对应的定时器
clearTimeout(this.timer)
//从新启动一个延时器，并把timeID赋值给this.timer
this.timer = setTimeout(() =>{
//如果500ms内没有触发这个的事件，就做你要做的事。要是触发的话，定时器就会被上一句代码清除，也就会重新计时
。。。。。。。。如发请求等事情，滚动事件等事件的执行
},500)
}
2.节流
作用：防止事件连续不停的进行，一个一个的处理，是间隔时间执行，一些高频事件，在被连续触发时，需要限定在单位时间内只执行一次；例如：防止发起多次请求或者按键的连续点击
节流：也可分为时间戳节流（后一时间减去前一时间小于多少就不执行代码）和定时器节流两类
1.定时器实现思想：
let timer = null
//事件所触发的函数
clickFn(){
if(timer){
//条件为true就会return，不会执行下面定时器里面的代码了
return
}
timer = setTimeout(() =>{
//如果条件为false，就会执行这个事件的代码
。。。。。。。。如发请求等事情
timer = null
},500)
}
2.时间戳方法：
let last = 0;
function(){
//获取现在的事件戳
let now = new Date().getTime();
// 现在的时间戳减去代码执行后的时间戳如果大于某个时间，就执行代码，否则就不执行
if (now - last > 300) {
//执行代码
console.log("函数节流")
//把代码执行完成后的事件戳赋值给last
last = new Date().getTime();
}
}
3.单行文本溢出显示...
<style>
.name {
//单行文本,设置不允许换行
white-space:nowrap;
//溢出部分隐藏
over-flow:hidden;
//文本溢出，使用...代替
text-overflow:ellipsis;
}
</style>
<body>
<div class='name'>这是一段很长的文本</div>
</body>
4.多行文本溢出显示...
1,基于高度截断：原理是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字
优点：兼容性好，对各大主流浏览器有好的支持，响应式截断，根据不同宽度做出调整。一般文本存在英文的时候，可以设置word-break: break-all使一个单词能够在换行时进行拆分
<style>
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
</style>
<body>
<div class='demo'>长文本内容</div>
</body>
2.基于行数截断：兼容性相对较低，
<style>
p {
width: 400px;
border-radius: 1px solid red;
//用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性
-webkit-line-clamp: 2; //语句1，2代表的这意思是两行
display: -webkit-box; //和语句1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; //和语句1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden; //文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis; //多行文本的情况下，用省略号“…”隐藏溢出范围的文本
}
</style>
<p>
第一行文字
第二行文字
</p >
\
\
