通过实例讲解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 学习笔记(十六) js事件
Feb 01 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
巧用canvas
Jan 21 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
jQuery中库的引用方法
Jan 06 jQuery
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
jQuery filter函数使用方法
2014/05/19 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
银行行长竞聘演讲稿
2014/04/23 职场文书
师范大学生求职信
2014/06/13 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
客房服务员岗位职责
2015/02/09 职场文书
社区党支部承诺书
2015/04/29 职场文书