同意采用延时器操作
防抖介绍:在触发事件的时延迟规定时间去执行,如果时间内多次触发,会清除之前一次延时器的timeid,赋值新的timeid ,也就是说: 不管执行多少次, 延时的时间都会被重新赋值,执行最后一次。
if ( this.timeid ) {
clearTimeOut( this.timeid)
} // 先清除定时器
this.timeid = setTimeOut(()=> {
console.log( '需要执行的函数放在这里‘)
})
//////////////////////封装成一个方法
function (fn, wait){
let timeid = null
return function () {
if (timeid) clearTimeOUt()
timeid = setTimeOut( ()=.> {
console.log(' 需要执行的函数放在这里 ')
}, 1000))
}
}
节流函数:就是在一定时间内不管执行多少次都只会触发一次,延时器原理是: 通过设置延时时间,在第一次调用时,创建延时器,先设定一个变量true,写入需要执行的函数。第二次执行这个函数时,会判断变量是否true,是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下次判断变量时则为false,函数会依次运行。目的在于在一定的时间内,保证多次函数的请求只执行最后一次调用。
if ( !this.timeid ){
this.timeid = setTimeOut( ()=> {
console.log(' 需要执行的函数放在这里 ')
this.timeid = null
},1000))
}
/////////////timeid 没有值得时候,走内部函数并赋值,有值之后,忽略函数,不执行任何操作
封装一个函数
function () {
let timeid = null
return function () {
if ( !this.timeid ){
this.timeid = setTimeOut( ()=> { console.log(' 需要执行的函数放在这里 ') this.timeid = null },1000)) }
}
}
节流还有一种思想是节流阀,,先定义一个变量(布尔值), 然后通过判断变量的值,决定下面的程序走不走, 进入程序后将开关关闭,等程序执行完再打开开关。