白学的小知识[防抖.节流.箭头函数]

最新推荐文章于 2024-05-12 16:44:10 发布

原创最新推荐文章于 2024-05-12 16:44:10 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文介绍了JavaScript中防抖和节流两种处理鼠标事件性能优化的方法，以及箭头函数的使用注意事项，包括this指向、构造函数限制和不能作为Generator函数等。

防抖的2种方式：

var num = 1;

let times;
// 先执行
content.onmousemove = function (){
let obj = times;
clearTimeout(times);
times = setTimeout(()=>{
times = null;
},1000)
if(!obj){
console.log(typeof !obj);
content.innerHTML = num++;
}
};
// 后执行
content.onmousemove = function (){
clearTimeout(times);
times = setTimeout(()=>{
content.innerHTML = num++;
},1000)
};

请写出节流的2种方式：

// 延时器
var time;
content.onmousemove = function(){
if(!time){
time = setTimeout(()=>{
time = null;
content.innerHTML = num++;
},1000)
}

// 时间戳
var content = document.getElementById("content");
var num = 1;
var timeNew = 0;
content.onmousemove = function(){
var timeOld = Date.now();
if(timeOld-timeNew>1000){
timeNew = timeOld;
content.innerHTML = num++;
}
}

箭头函数在使用时应该注意什么：

用了箭头函数，this就不是指向window，而是父级（指向是可变的）

不能够使用arguments对象3不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误

不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误

不可以使用yield命令，因此箭头函数不能用作 Generator 函数

没有{}时不能换行