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 ...
随机推荐
- php开发面试题---面试常用英语(你能介绍你自己吗?)
php开发面试题---面试常用英语(你能介绍你自己吗?) 一.总结 一句话总结: Could you please describe yourself? 1.为什么觉得自己适合这份工作? Why do ...
- iconfont 在vue项目中的应用(icon-component组件)
前言:上一篇记录了iconfont的三种基本使用方法. 在Vue中应该如何使用呐?Vue中的组件化思想很明确,要提高组件的复用率,增强项目的可维护性,扩展性.以下是采用icontfont的使用方式之s ...
- mybatis框架中XxxxMaper.xml的文件
我们知道在mybatis框架中,config.xml中会关联到许多的XxxxMapper的xml文件,这些文件又对应着一个个的接口,来观察下这些xml文件 从以下这个文件为例子: <?xml v ...
- <Python基础>字典的基本操作
''' 小知识 1.字典的键只能是不可变数据类型:int 元组 bool str(可哈希) 字典查找数据会使用二分查找,会先用哈希表将键转化为数字然后进行查找 ''' s = { "name ...
- spring-data-JPA repository自定义方法规则
一.自定义方法的规则 Spring Data JPA框架在进行方法名解析时,会先把方法名多余的前缀截取掉,比如find,findBy,read,readBy,get,getBy,然后对剩下的部分进行解 ...
- No converter found for return value of type: class com.alibaba.fastjson.JSON解决办法
默认情况下,springMVC的@ResponseBody返回的是String类型,如果返回其他类型则会报错.使用fastjson的情况下,在springmvc.xml配置里加入: <mvc:a ...
- 【学术篇】luogu2778 [AHOI2016初中组]迷宫(代码高能!)
好久好久我都没有刷题了. 题目の传送门:https://www.luogu.org/problem/show?pid=2778 题目大意:(啥 题目讲得不够清楚?)平面内有n个以整点(就是坐标都是整数 ...
- nodejs实现读取文件
今天后端同事下班,想让我读取一个文件的内容.我想这个是小忙啊,就立马答应了. 我知道这个是nodejs读取,可是我又想,平时我们都要起一个服务才能够运行node服务器, 比如如下代码 var http ...
- LinkedHashMap笔记
一.最基本元素存储单元 /** * HashMap.Node subclass for normal LinkedHashMap entries. */ static class Entry<K ...
- 并发和多线程(九)--AbstractQueuedSynchronizer排他锁基本原理
AbstractQueuedSynchronizer简称为AQS,AQS是ReentrantLock.CountdownLatch.CycliBarrier等并发工具的原理/基础,所以了解AQS的原理 ...