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 ...
随机推荐
- VS2010-MFC(MFC常用类:定时器Timer)
转自:http://www.jizhuomi.com/software/232.html 前面一节讲了CTime类和CTimeSpan类的使用,本节继续讲与时间有关的定时器.定时器并不是一个类,主要考 ...
- 夏令营501-511NOIP训练18——高三楼
传送门:QAQQAQ 题意:定义矩阵A与矩阵B重复,当且仅当A可以通过任意次行列交换得到B,例如下图A,B即为合法矩阵 现求对于$n*n$的矩阵有多少个不重复的矩阵 数据范围: 对于10%的数据 N≤ ...
- 新增加的html里的标签元素,该元素作为事件,js获取不到id的问题
if(flag==0){ var p = document.createElement("p"); var text ...
- 1.2_springboot2.x中redis缓存&原理介绍
1.整合redis作为缓存 说明这里springboot版本2.19 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构 ...
- 1.2python基础_数字类型_数字(Number)类型
一.整型(int型.整数) 整型 等价于C中的有符号长整型(long) 与系统的最大整型一致(如32位机器上的整型是32位,64位机器上的整型是64位), 可以表示的整数范围在[-sys.maxint ...
- 初识OpenCV-Python - 005: 识别视频中的蓝色
此次主要学习了如何将BGR转成HSV,主要用到cv2.cvtColor()和cv2.inRange()函数来识别视频中的蓝色物体. code: import cv2import numpy as np ...
- <Django> 高级(其他知识点)
1. 管理静态文件 什么是静态文件? 项目中的CSS.图片.js都是静态文件 配置静态文件(settings.py) # Static files (CSS, JavaScript, Images) ...
- NTT FWT(xor or and) 模板
void nnt(int a[],int len,int on) { ;i<len;i++) if(i<r[i]) swap(a[i],a[r[i]]); ;i<len;i<& ...
- selenium基础(多表单切换、多窗口切换)
一.多表单的切换 frame:HTML页面中的一中框架,主要作用是在当前页面中指定区域显示另一页面元素: (HTML语言中,frame/iframe标签为表单框架) 在web ...
- RunLoop运行循环机制
http://www.jianshu.com/p/0be6be50e461 基本概念 进程 进程是指在系统中正在运行的一个应用程序,而且每个进程之间是独立的,它们都运行在其专用且受保护的内存空间内,比 ...