文章目录
一、手撸组件间传值
【Vue基础九】–父子组件传值
【Vue基础十】— 兄弟组件之间传值【中央事件总线，消息订阅与发布】
二、Promise实现的sleep
const sleep = (time) => {
return new Promise((resolve, reject) => {
setTimeout(resolve,time)
})
}
sleep(3000).then({
console.log('延迟三秒才执行的哦')
})
三、 防抖和节流
3-1
-
函数防抖和节流： 优化高频率执行js代码的一种手段
- js中一些事件：
像resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断调用绑定在事件上的回调函数，极大浪费资源，降低前端性能 - 为了优化体验，需要对这类事件进行调用次数的限制
- js中一些事件：
3-1-1 防抖
-
防抖 ： 在事件被触发n秒后再执行回调，如果这n秒内又被触发，则重新计时
-
var timer; function debounce(fn, delay) { clearTimeout(timer); timer = setTimeout(function() { fn(); },delay); }- 例子中的debounce就是防抖函数
-
var timer只能在setTimeout的父级作用域中，这样才是同一个timer，并且为了方便防抖函数的调用和回调函数fn的传参问题,应该用闭包来解决这些问题
function debounce(fn, delay) { var timer; // 维护一个timer return function() { var _this = this; var args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function () { fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args) },delay); } }- 使用闭包后，解决传参和封装防抖函数的问题，就可以在其他地方随便将需要防抖的函数传入debounce了
3-1-2 节流
-
每隔一段时间，只执行一次函数
-
定时器实现节流函数 ：
function throttle(fn, delay) { var timer; return function () { var _this = this; var args = arguments; if (timer) { return; } timer = setTimeout(function () { fn.apply(_this, args); timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器 }, delay) } } -
时间戳实现节流函数：
function throttle(fn, delay) { var previous = 0; // 使用闭包返回一个函数并且用到闭包函数外面的变量previous return function() { var _this = this; var args = arguments; var now = new Date(); if(now - previous > delay) { fn.apply(_this, args); previous = now; } } }
3-2 函数节流和防抖的异同比较
-
相同点：
- 都可以通过使用setTimeout实现
- 目的： 降低回调执行频率，节省计算资源
-
不同：
扫描二维码关注公众号，回复： 16307077 查看本文章
-
函数防抖:
- 在一段连续操作结束后，处理回调，利用clearTimeout 和setTimeout实现
- 一定时间连续触发的事件只在最后执行一次
-
函数节流：
- 在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
- 侧重于一段时间内只执行一次
-
3-3 应用场景：
3-3-1 函数防抖
- 连续的事件，只需触发一次回调的场景有
- 搜索框搜索输入
- 用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小Resize
- 只需窗口调整完成后，计算窗口大小，防止重复渲染
- 搜索框搜索输入
3-3-2 函数节流
- 间隔一段时间执行一次回调
- 滚动加载，加载更多或滚到底部监听
- 谷歌搜索框，搜索联想功能
- 高频点击提交，表单重复提交
四、 JS实现加减乘除
<!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>
<input type="text" id="tex1" />
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="tex2" />
<input type="button" value=" = " id="button" />
<input type="text" id="fruit" />
<script>
var button = document.getElementById("button");
button.addEventListener("click", count)
function count() {
var a = parseInt(document.getElementById("tex1").value);
console.log(a);
var b = parseInt(document.getElementById("tex2").value);
console.log(b);
var selectSign = document.getElementById("select").value;
switch (selectSign) {
case '+':
answer = a + b;
break;
case '-':
answer = a - b;
break;
case '*':
answer = a * b;
break;
case '/':
answer = a / b;
}
document.getElementById("fruit").value = answer;
}
</script>
</body>
</html>
五、 算法： 二分查找
忘记当时啥子题目，知识点是二分查找