网站图片轮播怎么弄引流用什么话术更吸引人
函数防抖:
函数防抖:是指连续触发事件,当一段时间后不在触发事件后,事件处理函数才会执行一次。如果在设定的时间没到之前,是不会重复执行事件的处理函数。
function debounce(func,wait = 0){if(typeOf func != 'function'){throw new TypeError('这不是个方法')}let times = null,result;return function(){let that = this,arge = arguments;if(times){ clearTimeout(timeid);}times = setTimeout(() =>{result = func.apply(that,arge);},wait)return result}
}
// 处理函数
function handle() { console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
当持续触发scroll事件时,事件处理函数handle只在停止滚动1000毫秒之后才会调用一次,也就是说在持续触发scroll事件的过程中,事件处理函数handle一直没有执行。
函数节流:
函数节流:是指在在持续触发事件的时候,保证一定时间段内只调用一次事件处理函数
function throttle(func,wait){let times = null,stateTime = Date.now();return function(){let curTime = Date.now();let that = this,arge = arguments;let remating = wait - (curTime -stateTime);if(remating <= 0){ //说明到了执行时间 没有延迟func.apply(that,arge);stateTime = Date.now();}else{times = setTimeout(func,wait)}}}
function handle() { console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
在节流函数内部使用开始时间startTime、当前时间curTime与delay来计算剩余时间remaining,当remaining<=0时表示该执行事件处理函数了(保证了第一次触发事件就能立即执行事件处理函数和每隔delay时间执行一次事件处理函数)。如果还没到时间的话就设定在remaining时间后再触发 (保证了最后一次触发事件后还能再执行一次事件处理函数)。当然在remaining这段时间中如果又一次触发事件,那么会取消当前的计时器,并重新计算一个remaining来判断当前状态。
区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。
参考链接:https://www.cnblogs.com/momo798/p/9177767.html