事件节流与防抖
2017-12-31 23:44
211 查看
函数节流(throttle)
这里以判断页面是否滚动到底部为例,普通的做法就是监听 window 对象的 scroll 事件,然后再函数体中写入判断是否滚动到底部的逻辑,这样做的一个缺点就是比较消耗性能,因为当在滚动的时候,浏览器会无时不刻地在计算判断是否滚动到底部的逻辑,而在实际的场景中是不需要这么做的,在实际场景中可能是这样的:在滚动过程中,每隔一段时间在去计算这个判断逻辑。而函数节流所做的工作就是每隔一段时间去执行一次原本需要无时不刻地在执行的函数,所以在滚动事件中引入函数的节流是一个非常好的实践:$(window).on('scroll', throttle(function() { // 判断是否滚动到底部的逻辑 var pageHeight = $('body').height(), scrollTop = $(window).scrollTop(), winHeight = $(window).height(), thresold = pageHeight - scrollTop - winHeight; // 到页面底部 if (thresold > -100 && thresold <= 20) { $("script:first").before("<p>hello world</p>"); } }, 500));
加上函数节流之后,当页面再滚动的时候,每隔 300ms 才会去执行一次判断逻辑。
简单来说,函数的节流就是通过闭包保存一个标记(canRun = true),在函数的开头判断这个标记是否为 true,如果为 true 的话就继续执行函数,否则则 return 掉,判断完标记后立即把这个标记设为 false,然后把外部传入的函数的执行包在一个 setTimeout 中,最后在 setTimeout 执行完毕后再把标记设置为 true(这里很关键),表示可以执行下一次的循环了。当 setTimeout 还未执行的时候,canRun 这个标记始终为 false,在开头的判断中被 return 掉。
function throttle(fn, interval = 300) { var canRun = true; return function() { if (!canRun) return; canRun = false; setTimeout(() => { fn.apply(this, arguments); canRun = true; }, interval); }; };
函数防抖(debounce)
这里以用户注册时验证用户名是否被占用为例,如今很多网站为了提高用户体验,不会再输入框失去焦点的时候再去判断用户名是否被占用,而是在输入的时候就在判断这个用户名是否已被注册,这样的做法不好的是当用户输入第一个字符的时候,就开始请求判断了,不仅对服务器的压力增大了,对用户体验也未必比原来的好。而理想的做法应该是这样的,当用户输入第一个字符后的一段时间内如果还有字符输入的话,那就暂时不去请求判断用户名是否被占用。在这里引入函数防抖就能很好地解决这个问题:$('input.user-name').on('input', debounce(function () { $.ajax({ url: `https://just.com/check`, method: 'post', data: { username: $(this).val(), }, success(data) { cb(); }, error(error) { console.log(error); }, }); }));
其实函数防抖的原理也非常地简单,通过闭包保存一个标记来保存 setTimeout 返回的值,每当用户输入的时候把前一个 setTimeout clear 掉,然后又创建一个新的 setTimeout,这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数了。
function debounce(fn, interval = 300) { let timeout = null; return function () { clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(this, arguments); }, interval); }; }
相关文章推荐
- 事件委托、函数节流及防抖
- JS事件中防抖debounce和节流throttle以及requestAnimationFrame
- js中连续触发事件的稀释方法(函数节流、函数防抖、标识变量)
- 【javascript】滚动条事件优化->函数节流与去抖
- 函数节流 + 函数防抖
- 处理事件节流方法
- 页面滚动事件与节流
- 频繁操作中的防抖和节流
- 页面优化之高性能函数防抖与节流
- [JS]防抖和节流
- 函数节流和防抖
- [JS]防抖和节流
- [转载]函数节流与函数防抖
- web性能优化之事件节流
- 学习JS防抖【节流】
- 页面优化之高性能滚动scroll(防抖和节流)
- 防抖动与节流 防止事件频繁触发
- 节流函数和防抖函数学习
- 防抖函数和节流函数小列
- 防抖(Debounce)与节流( throttle)区别