1.谈一谈防抖与节流？有什么区别？如何实现？

定义
- 所谓防抖，就是指触发事件后，在 n 秒后函数才会执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
- 所谓节流，就是指连续触发事件，但是在 n 秒中只执行一次函数
区别
- 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数
使用场景

防抖：
- 搜索框搜索输入。只需用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染
节流：
- 滚动加载，加载更多或滚到底部监听
- 谷歌搜索框，搜索联想功能
- 高频点击提交，表单重复提交

2.防抖的使用例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>防抖与节流</title><style>.box {width: 200px;height: 200px;overflow: auto;}</style>
</head><body><div class="box" id="container"><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p></div>
</body>
<script type="text/javascript">// 当连续触发scroll事件，handle函数只会在1秒时间内执行一次，在如果继续滚动执行，就会清除定时器，重新计时。相当于就是多次执行，只执行一次。function debounce(fn, wait) {var timeout = null;// 使用闭包，缓存变量return function () {if (timeout !== null) {console.log('清除定时器啦')clearTimeout(timeout);  //清除这个定时器}timeout = setTimeout(fn, wait);}}// 处理函数function handle() {console.log(Math.random());}var container = document.getElementById('container')container.addEventListener('scroll', debounce(handle, 1000));
</script></html>

3.节流的使用例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>防抖函数</title><style>.box {width: 200px;height: 200px;overflow: auto;}</style>
</head><body><div class="box" id="container"><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p><p>节流演示</p></div>
</body>
<script>// 在前端开发中会遇到一些频繁的事件触发，比如：   1000/200= 5ms;// window 的 resize(窗口大小)、scroll（滚动）// mousedown、mousemove// keyup、keydown// ……// 前端开发中，我们常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，就会加重浏览器的负担，影响用户的体验感，// 因此，我们可以采取防抖（debounce）和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。// throttle 节流     指定时间间隔内只会执行一次任务；// 节流的原理很简单：  如果你持续触发事件，每隔一段时间，只执行一次事件。// 关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。// 场景很多，常见的有：// 屏幕尺寸变化时页面内容的变动，执行相应逻辑；// 监听鼠标滚动时间，执行相应逻辑；// 监听重复点击时的时间，执行相应逻辑// 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。// 在节流函数内部使用开始时间prev、当前时间now和剩余时间remain，当剩余时间小于等于0意味着执行处理函数，这样保证第一次就能立即执行函数并且每隔delay时间执行一次；function throttle(func, delay) {var timer = null; // 使用闭包，缓存变量var prev = Date.now(); // 最开始进入滚动的时间return function () {var context = this;   // this指向windowvar args = arguments;var now = Date.now();var remain = delay - (now - prev); // 剩余时间clearTimeout(timer);// 如果剩余时间小于0，就立刻执行if (remain <= 0) {func.apply(context, args);prev = Date.now();} else {timer = setTimeout(func, remain);}}}// 处理的函数function handle() {console.log(Math.random());}var container = document.getElementById("container");container.addEventListener("scroll", throttle(handle, 3000))//20次    真实需求中   一秒调依次函数就足够了   怎么办？</script></html>

一篇让你彻底明白防抖和节流以及应用场景相关推荐

防抖和节流以及应用场景
防抖是将多次执行变为最后一次执行,比如百度搜索,就应该用防抖,当我连续不断输入时,不会发送请求:当我一段时间内不输入了,才会发送一次请求:如果小于这段时间继续输入的话,时间会重新计算,也不会发送请求 ...
2019 面试准备 - JS 防抖与节流 (超级重要!!!!!)
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址本文涉及知识点: 防抖与节流重绘与回流浏览器解析 URL DNS 域名解析 ...
JavaScript防抖与节流的具体实现及使用场景
文章目录前言一.什么是防抖和节流? 二.防抖简单介绍图解代码如下(示例): 二.节流简单介绍图解代码如下(示例): 三.防抖与节流的使用场景总结前言最近遇到注册登陆按钮需要添加防 ...
防抖和节流——lodash插件
首先了解一下什么是防抖.节流防抖:当前的所有的触发都被取消,最后一次在规定时间内才会触发,即如果连续快速触发,只会执行一次. 节流:把频繁的触发变为少量的触发,可以给浏览器充裕的时间解析代码防抖就 ...
“约见”面试官系列之常见面试题第二十一篇之函数防抖和节流（建议收藏）
目录前言概念函数防抖(debounce) 函数节流(throttle) 常见应用场景函数防抖的应用场景函数节流的应用场景实现原理函数防抖(debounce) 函数节流(throttle) ...
postgresql 怎么读_大数据采集和抽取怎么做？这篇文章终于说明白了！
本文来源于公众号[胖滚猪学编程],转载请注明出处! 关于数据中台的概念和架构,我们在大白话六问数据中台和数据中台全景架构及模块解析!一文入门中台架构师!两篇文章中都说明白了.从这一篇文章开始分享中台 ...
前端战五渣学JavaScript——防抖、节流和rAF
看了<JavaScript高级程序设计>和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖和节流的概念取决于多数人的概念吧,并且基于伦敦前端工程师David Cor ...
防抖节流_关于防抖和节流
虾扯蛋之函数防抖和节流 - 掘金先贴贴这个哥们的. 因为我看了很多,感觉大多都是复制.没有啥思考在介绍以下这些问题的时候.先公示下我思考的时候出现的问题 1.如果你使用 onclick 和 ad ...
防抖节流_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点「~函数防抖与节流 ~」每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...

一篇让你彻底明白防抖和节流以及应用场景

1.谈一谈防抖与节流？有什么区别？如何实现？

2.防抖的使用例：

3.节流的使用例：

一篇让你彻底明白防抖和节流以及应用场景相关推荐

最新文章

热门文章

一篇让你彻底明白防抖和节流以及应用场景

1.谈一谈防抖与节流？有什么区别？如何实现？

2.防抖的使用 例：

3.节流的使用 例：

一篇让你彻底明白防抖和节流以及应用场景相关推荐

最新文章

热门文章

2.防抖的使用例：

3.节流的使用例：