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< ...
- Windows下DNS ID欺骗的原理与实现
域名系统(DNS)是一种用于TCP/IP应用程序的分布式数据库,它提供主机名字和IP地址之间的转换信息.通常,网络用户通过UDP协议和DNS服务器进行通信,而服务器在特定的53端口监听,并返回用户所需 ...
- AutowireCapableBeanFactory 根据名称:自动装配的BeanFactory,其实也是对BeanFactory的增强
//自动装配的Bean 工厂 public interface AutowireCapableBeanFactory extends BeanFactory { //工厂没有自动装配的Bean int ...
- PAT甲级——A1137 Final Grading【25】
For a student taking the online course "Data Structures" on China University MOOC (http:// ...
- java设计模式系列1-- 概述
准备开始写些设计模式的随笔,这是第一篇,概述主要回顾下六大原则 先用轻松和谐的语言描述下这6个原则: 单一职责 每个类甚至每个方法都只要做自己分内的事,不要背别人的锅,也就是功能要分类,代码要解耦 里 ...
- Requests+Excel接口自动化测试(Python)
一.框架结构: 工程目录 二.Case文件设计 三.基础包 base 3.1 封装get/post请求(runmethon.py) import requests import json class ...
- Win10系统无法安装可选功能提示错误代码0x800F081F的解决方法
DISM /Online /Cleanup-Image /RestoreHealth /Source:wim:H:\sources\install.wim:1 /limitaccess
- Amazon S3和EBS的区别
- JS流程控制语句 多重判断满足你各种需求 要在多组语句中选择一组来执行,使用if..else嵌套语句。
多重判断(if..else嵌套语句) 要在多组语句中选择一组来执行,使用if..else嵌套语句. 语法: if(条件1) { 条件1成立时执行的代码} else if(条件2) { 条件2成立时执行 ...
- Linq学习笔记(第一部分)
本文分享自lliulun的30分钟linq教程,地址:http://www.cnblogs.com/liulun/archive/2013/02/26/2909985.html 一:与LINQ有关的语 ...