console.log('==============================构造函数实现继承==============================');
function Animal(name) {
this.name = name
this.eat = function() {
console.log(`${this.name}吃东西`);
}
}
function Dog(name) {
this.name = name
this.bark = function() {
console.log(`${this.name}bark!`);
}
}
const pig = new Animal('小猪')
console.log('构造函数创建的:' + pig.name);
console.log('构造函数创建的方法:')
pig.eat()
Dog.prototype = new Animal()
const dog1 = new Dog('小狗')
console.log('构造函数继承:' + dog1.name);
console.log('构造函数创建的方法:')
dog1.eat()
console.log('构造函数创建的方法:')
dog1.bark()
console.log('==============================class类实现继承==============================');
class AnimalClass {
constructor(name) {
this.name = name
}
eat() {
console.log(`${this.name}:吃东西`);
}
}
class DogClass extends Animal {
constructor(name) {
super(name)
this.name = name
}
say() {
console.log(`DogClass:${this.name} 汪!汪!汪!`);
}
}
const dogClassN = new DogClass('class中狗')
console.log(dogClassN);
dogClassN.say()
dogClassN.eat()
function debounce(callBack, delay) {
let t
return () => {
if (t) {
clearTimeout(t)
}
t = setTimeout(callBack, delay);
}
}
function showScrollTop() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('当前滚动条位置为:' + scrollTop);
}
onscroll = debounce(showScrollTop, 1000)
const elBtn2 = document.getElementById('btn2')
elBtn2.addEventListener('click', debounce(submit2, 3000))
function submit2() {
console.log('防抖@@@@@@@@@@@@@@+提交。。。。');
}
function throttle(callBack, delay) {
let flag = true
return function() {
if (!flag) {
console.error('提交太频繁了,请稍后再试!');
return false
}
flag = false
setTimeout(() => {
callBack()
flag = true
}, delay);
}
}
const elBtn = document.getElementById('btn')
btn.addEventListener('click', throttle(submit, 5000))
function submit() {
console.log('节流$$$$$$$$$,提交中');
}
防抖节流中立即执行
**
* @description:
* @param {*} fn
* @param {*} time
* @param {*} type 1表示立即执行,其他表示非立即执行
* @return {*}
*/
function debounce2(fn, time, type) {
if (type == 1) {
let timer = null;
let canRun = true;
return function() {
if (timer) {
clearTimeout(timer);
canRun = false;
}
timer = setTimeout(() => {
timer = null;
canRun = true;
}, time)
canRun && fn(...arguments)
}
} else {
let timer = null;
return function() {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn(...arguments)
timer = null
}, time)
}
}
}
let btn22 = document.getElementById('btn2')
btn22.addEventListener('click', debounce2(submit2, 2000, 1))
function submit2() {
console.log('防抖@@@@@@@@@@@@@@+提交。。。。');
}
function throttle2(fn, time, type) {
let canRun = true;
if (type == 1) {
return function() {
if (canRun) {
fn(...arguments);
canRun = false;
setTimeout(() => {
canRun = true
}, time)
} else {
console.error('提交太频繁了,请稍后再试!');
}
}
} else {
return function() {
if (canRun) {
canRun = false;
setTimeout(() => {
fn(...arguments)
canRun = true
}, time)
}
}
}
}
let bb2 = document.getElementById('btn')
bb2.addEventListener('click', throttle2(submit2, 2000, 1))
function submit2(a = 1, b = 2) {
console.log('节流$$$$$$$$$,提交中');
}