摘要：只有别人没刷卡了，司机才开车。应用场景搜索输入框监听和事件，请求次数过于平凡会增加服务器压力。可以让用户内不在输入内容，才向服务器发起请求。触发的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次函数方法调用
概念解读：
在频繁触发的情况下，只有足够的空闲时间，才执行代码一次。
生活例子：坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。
1、搜索输入框（监听keyup和keydown事件，请求次数过于平凡会增加服务器压力。可以让用户1s内不在输入内容，才向服务器发起请求。）
2、window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
函数方法function debounce(func, wait) {
let timeout = null
return function() {
clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(this, arguments)
}, wait)
}
}
//调用
function getData() {
... // ajax
}
documentElement.addEventListener("keyup", debounce(getData, 1000));
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109002.html
摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。 原博客地址，欢迎star 函数防抖和节流 函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...
摘要：函数防抖的要点，是需要一个来辅助实现，延迟运行需要执行的代码。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。而非立即执行版指的是触发事件后函数会立即执行，然后秒内不触发事件才能继续执行函数的效果。。 JS中的函数防抖 一、什么是函数防抖 概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重...
摘要：而上述两种方法，就叫做函数的节流和防抖。二函数节流和函数防抖函数节流函数节流函数节流是让这个函数在间隔某一段时间执行一次。在这个项目中，我认为函数节流和函数防抖都能很好的解决问题。 一 项目需求 最近在做一些小的练手代码的时候，碰到了一个很常见的问题，当在搜索框中进行搜索的时候，如果快速输入很多字符的话，搜索框的监听回调函数会执行很多次，如果回调业务较复杂的话，可能会导致页面运行缓慢甚...
摘要：隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内，函数被频繁调用执行，通过时间频率控制，减少回调函数执行次数，来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题，或许早已是烂大街的解读文章。不过春招系列面试下来，不少伙伴们还...
摘要：基础防抖我们现在写一个最基础的防抖处理标记事件也做如下改写现在试一下，我们会发现只有我们停止滚动秒钟的时候，控制台才会打印出一行随机数。 为何要防抖和节流 有时候会在项目开发中频繁地触发一些事件,如 resize、 scroll、 keyup、 keydown等，或者诸如输入框的实时搜索功能，我们知道如果事件处理函数无限制调用，会大大加重浏览器的工作量，有可能导致页面卡顿影响体验；后台...
阅读 638·2021-11-25 09:43
阅读 1906·2021-11-17 09:33
阅读 824·2021-09-07 09:58
阅读 2062·2021-08-16 10:52
阅读 482·2019-08-30 15:52
阅读 1722·2019-08-30 15:43
阅读 974·2019-08-30 15:43
阅读 2924·2019-08-29 16:41
