通过实例讲解JS如何防抖动


Posted in Javascript onJune 15, 2019

前言

这道题目经常与事件触发器同时存在,为了考察面试者在一些具体业务流程上(信息流,搜索框输入查询)等,能否综合的考虑实现思路。

题目

在某些信息列表中一般采用瀑布流,滚动一屏时加载相应的数据,请思考如何避免连续下拉时而产生的问题(可能是页面崩溃,也可能是巨卡无比)。

一般情况下,如果碰到这样的面试题,防抖动机制,就能很好的解决,这方面最早的应用实践还是Twitter,开发者写了一篇博客,详细的阐述了如何解决这样的问题。那么,说到防抖动,其核心内涵在于延迟处理,也就是将一系列的事件处理程序全部延迟,保障推送进来的第一次事件处理。

event.on('scroll', function(e){ 
var fun; 
return function(){ 
if(fun) clearTimeout(fun);
fun = setTimeout(function(){ 
// console.log('1')
},500);
}
}());

这是最常见的一种方式,如果scroll的次数较多时,可以先将真实的函数放置在定时器中。

接下来我们将它抽象一下:

function de(something,delay){ 
var fun; 
return function(){ 
if(fun) clearTimeout(fun);
fun = setTimeout(function(){ 
something();
},delay);
}
}
function scrollToList(){
}
event.on('scroll', de(scrollToList,1000))
event.on('scroll', de(scrollToList,2000))

显然这是一个弱爆了的处理,那有没有更好的方式呢?有,比如节流。

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

Javascript 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
js读取cookie方法总结
Oct 31 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
js笔试题-接收get请求参数
Jun 15 #Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 #Javascript
通过实例了解js函数中参数的传递
Jun 15 #Javascript
RxJS的入门指引和初步应用
Jun 15 #Javascript
js中let能否完全替代IIFE
Jun 15 #Javascript
回顾Javascript React基础
Jun 15 #Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php学习笔记之基础知识
2014/11/08 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
<script defer> defer 是什么意思
2009/05/10 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
Python多线程编程(一):threading模块综述
2015/04/05 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
基于django传递数据到后端的例子
2019/08/16 Python
python sorted函数的小练习及解答
2019/09/18 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
python缩进长度是否统一
2020/08/02 Python
python3中数组逆序输出方法
2020/12/01 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
美国存储和组织商店:The Container Store
2017/08/16 全球购物
Servlet的生命周期
2013/08/25 面试题
汽车运用工程毕业生自荐信
2013/10/29 职场文书
2014年民警工作总结
2014/11/25 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
先进个人申报材料
2014/12/30 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
河童之夏观后感
2015/06/11 职场文书
python如何查找列表中元素的位置
2022/05/30 Python