通过实例讲解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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
原生js实现放大镜特效
Mar 08 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 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
基于Zend的Config机制的应用分析
2013/05/02 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
构建Python包的五个简单准则简介
2015/06/15 Python
python利用微信公众号实现报警功能
2018/06/10 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python3字符串操作总结
2019/07/24 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
如何将json数据转换为python数据
2020/09/04 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
大学毕业生的自我鉴定
2013/11/30 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书