JS防抖动
这道题目经常与事件触发器同时存在,为了考察面试者在一些具体业务流程上(信息流,搜索框输入查询)等,能否综合的考虑实现思路。
题目:在某些信息列表中一般采用瀑布流,滚动一屏时加载相应的数据,请思考如何避免连续下拉时而产生的问题(可能是页面崩溃,也可能是巨卡无比)。
一般情况下,如果碰到这样的面试题,防抖动机制,就能很好的解决,这方面最早的应用实践还是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))
显然这是一个弱爆了的处理,那有没有更好的方式呢?有,比如节流。
JS防抖动的更多相关文章
- js:防抖动与节流
http://blog.csdn.net/crystal6918/article/details/62236730
- js:防抖动与节流【转载】
源文:https://blog.csdn.net/crystal6918/article/details/62236730#reply <!DOCTYPE html> <html l ...
- js点击事件代理时切换图片如何防抖动
由于图片的加载速度比较慢,我们可以直接用64base对图片进行编码,把编码加在图片的url中~~~这样加载会快一些,也不会有切换图片时出现的抖动效果
- 关于js节流函数throttle和防抖动debounce
废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...
- js动画性能提升笔记
JavaScript动画的性能并不亚于CSS动画.因此,如果使用了现代的动画库,例如Velocity,那么动画引擎的性能将不再是app的瓶颈,构成瓶颈的只有代码. 网络性能相关 动画是浏览器运行中资源 ...
- html加载js那些事
浏览器通过内置的JavaScript引擎,读取网页中的代码,对其处理后运行. JavaScript代码嵌入网页的方法 在网页中嵌入JavaScript代码有多种方法. 直接添加代码块 通过script ...
- 图片懒加载 echo.js
(function (root, factory) { if (typeof define === 'function' && define.amd) { define(functio ...
- debounce(防抖动函数)
短时间内不重复触发一个事件 设置一个门槛值,表示两次 Ajax 通信的最小间隔时间.如果在间隔时间内,发生新的keydown事件,则不触发 Ajax 通信,并且重新开始计时.如果过了指定时间,没有发生 ...
- 延迟加载图片控件--echo.js
echo.js的github地址:https://github.com/toddmotto/echo echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...
随机推荐
- hysbz3676 回文串 回文自动机
回文自动机模板题 头铁了一下午hdu6599,最后发现自己的板有问题 先放这里一个正确性得到基本确认的板,过两天肝hdu6599 #pragma GCC optimize(2) #include< ...
- Vue项目组织规范
目录 一.项目结构的核心思想 二.项目目录结构 三.资源路径编译规则 四.index.html 五.build目录 和 config目录 六.public目录 七.static 目录 八.src目录结 ...
- Eclipse_断点设置不起作用
在使用Ecplise进行代码调试的时候,发现打了断点,却一直不进入断点,也不会进取断点调试模式,找了很久答案,之前就发现断点的样子有些奇怪,现在看来,还真是这个原因造成的. 只要不跳过断点快捷键(Ct ...
- pip install mysql-python报错1. Unable to find vcvarsall.bat 2 fatal error C1083: Cannot open include file: 'config-win.h': No such file or directory 3.error: command 'mt.exe' failed with exit statu
最近在安装mysql -python 时报错折腾了半天,通过以下方法解决: 1. pip install mysql-python报错 Unable to find vcvarsall.bat (参考 ...
- php断点续传之文件上传与文件下载
下载: 原理: Http头的 Range.Content-Range()未启用单点登录GerenalRequest URL: http://www.demotest.com/php/fileDownl ...
- linux常用软连接使用ln -s
[软连接]另外一种连接称之为符号连接(Symbolic Link),也叫软连接.软链接文件有类似于Windows的快捷方式.它实际上是一个特殊的文件.在符号连接中,文件实际上是一个文本文件,其中包含的 ...
- [Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法
解决方法import Vue from "vue"; 默认引入的文件是 vue/dist/vue.runtime.common.js.这个可以在node_modules/vue/p ...
- JavaScript设置body高度为浏览器高度的方法
document.getElementsByTagName('body')[0].style.height = window.innerHeight+'px';
- Django常用组件之分页器
目录 循环插入数据测试 实现分页器 视图层使用 模板层使用 循环插入数据测试 # ORM 帮我们提供了循环插入数据更快捷的方法: book_list = [] for i in range(1000) ...
- /usr/lib/gcc/x86_64-linux-gnu/5/../../../x86_64-linux-gnu/crt1.o:在函数‘_start’中: (.text+0x20):对‘main’未定义的引用
原因是新建了一个可执行的函数,里面却没有main函数,加上main函数即可