JS防抖和节流实例解析_javascript技巧_脚本之家

来源:http://www.chinese-glasses.com 作者:Web前端 人气:63 发布时间:2020-03-31
摘要:节流函数 当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次

节流函数

当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

/** * 节流函数 * 当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发 * 小于既定值,函数节流会每隔这个时间调用一次 * 用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行 * 实现函数节流我们主要有两种方法:时间戳和定时器 * * @param func 执行函数 * @param wait 间隔时间 * @param options 立即执行 * options中 leading:false 表示禁用第一次执行 trailing: false 表示禁用停止触发的回调 */function throttle(fn, wait, options = {}) { let timer; let previous = 0; let throttled = function() { let now = +new Date(); // remaining 不触发下一次函数的剩余时间 if (!previous  options.leading === false) previous = now; let remaining = wait - (now - previous); if (remaining  0) { if (timer) { clearTimeout(timer); timer = null; } previous = now; fn.apply(this, arguments) } else if (!timer  options.trailing !== false) { timer = setTimeout(() = { previous = options.leading === false ? 0 : new Date().getTime(); timer = null; fn.apply(this, arguments); }, remaining); } } return throttled;}

如上所见,当持续触发scroll函数,handle函数只会在1秒时间内执行一次,在滚动过程中并没有持续执行,有效减少了性能的损耗

/** * 防抖函数(可用于防止重复提交) * 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, * 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数, * 且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。 * * @param func 执行函数 * @param wait 间隔时间 * @param immediate 立即执行 */function debounce(fn, wait, immediate) { let timer; return function() { if (timer) clearTimeout(timer); if (immediate) { // 如果已经执行过,不再执行 var callNow = !timer; timer = setTimeout(() = { timer = null; }, wait) if (callNow) { fn.apply(this, arguments) } } else { timer = setTimeout(() = { fn.apply(this, arguments) }, wait); } }}

在节流函数内部使用开始时间startTime、当前时间curTime和剩余时间remaining,当剩余时间小于等于0意味着执行处理函数,这样保证第一次就能立即执行函数并且每隔delay时间执行一次;如果还没到时间,就会在remaining之后触发,保证最后一次触发事件也能执行函数,如果在remaining时间内又触发了滚动事件,那么会取消当前的计数器并计算出新的remaing时间。通过时间戳和定时器的方法,我们实现了第一次立即执行,最后一次也执行,规定时间间隔执行的效果,可以灵活运用在开发中

时间: 2019-10-21阅读: 212标签: 封装防抖函数(可用于防止重复提交)

用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行实现函数节流我们主要有两种方法:时间戳和定时器

当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行实现函数节流我们主要有两种方法:时间戳和定时器

函数节流

var throttle = function { var timer = null; var startTime = Date.now(); //设置开始时间 return function() { var curTime = Date.now(); var remaining = delay - ; //剩余时间 var context = this; var args = arguments; clearTimeout; if  { // 第一次触发立即执行 func.apply; startTime = Date.now(); } else { timer = setTimeout; //取消当前计数器并计算新的remaining } }}function handle() { console.log;} window.addEventListener('scroll', throttle;
var throttle = function { var prev = Date.now { var context = this; //this指向window var args = arguments; var now = Date.now(); if  { func.apply; prev = Date.now(); } }}function handle() { console.log;}window.addEventListener('scroll', throttle;

本文由10bet发布于Web前端,转载请注明出处:JS防抖和节流实例解析_javascript技巧_脚本之家

关键词:

上一篇:echarts玩转图表之矩形树图

下一篇:没有了

最火资讯