1. 手写防抖函数
当一个动作连续触发,只执行最后一次
function mydebounce(fn, delay) {
let timer = null
// 1.接收可能传入的函数
const _debounce = function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
// 2.再将参数传给fn
fn.apply(this, args)
timer = null
}, delay)
}
// 返回一个新的函数
return _debounce
}
//测试代码:
<input type="text" />
<!-- 引用本地js文件 -->
<script src="./3.手写防抖.js"></script>
<script>
const inputEl = document.querySelector("input");
let counter = 1;
// 传入event参数并打印进行测试
function searchChange(event) {
console.log(`第${counter++}次网络请求`, this.value, event);
}
// 使用自己封装的函数实现防抖
inputEl.oninput = mydebounce(searchChange, 3000);
</script>
2. 手写节流函数
限制一个函数在一定时间内只能执行一次
function mythrottle(fn, interval) {
let startTime = 0
const _throttle = function(...args) {
const nowTime = new Date().getTime()
const waitTime = interval - (nowTime - startTime)
if (waitTime <= 0) {
// 只需要显式绑定this
fn.apply(this, arg)
startTime = nowTime
}
}
return _throttle
}
//测试代码:
<input type="text" />
<!-- 引入自己的节流函数 -->
<script src="./4.手写节流.js"></script>
<script>
const inputEl = document.querySelector("input");
let counter = 1;
function searchChange() {
console.log(`第${counter++}次网络请求`, this.value);
}
// 实现节流
inputEl.oninput = mythrottle(searchChange, 500);
</script>
3.手写实现EventEmitter
export default class EventEmitter {
constructor() {
this.event = {};
this.maxListerners = 10;
}
// 监听
on(type, listener) {
if (this.event[type]) {
if (this.event[type].length >= this.maxListerners) {
console.error('同一个监听器最多被十个对象监听,否则可能造成内存泄漏.\n');
return;
}
this.event[type].push(listener);
} else {
this.event[type] = [listener];
}
}
//发送监听
emit(type, ...rest) {
if (this.event[type]) {
this.event[type].map(fn => fn.apply(this, rest));
}
}
//移除监听器
removeListener(type) {
if (this.event[type]) {
delete this.event[type];
console.log(this.event);
}
}
//移除所有的监听器
removeAllListener() {
this.event = {};
}
}
//调用:
import EventEmit from './EventEmit';
let DeviceEventEmit = new EventEmit();
DeviceEventEmit.on('event', (param1, param2) => {
console.log('DeviceEventEmit', param1, param2);
});
DeviceEventEmit.emit('event', 'param1', 'param2');
DeviceEventEmit.removeListener('event');
4.图表渲染卡顿问题如何解决:
以Echars为例:
1.通过设置echarts的配置属性,如silent属性(是否响应和触发鼠标事件),减少不必要的数据触发事件的频次;showSymbol属性(是否显示点),不画数据点能减少部分卡顿压力,建议showSymbol和tooltip不一起使用。
2.和后台开发人员商量讨论,对数据进行压缩,减少数据量,或者流加载/分页懒加载方式。
3.优化ajax获取数据和处理数据的方法。