这道题目经常与事件触发器同时存在,为了考察面试者在一些具体业务流程上(信息流,搜索框输入查询)等,能否综合的考虑实现思路。

题目:在某些信息列表中一般采用瀑布流,滚动一屏时加载相应的数据,请思考如何避免连续下拉时而产生的问题(可能是页面崩溃,也可能是巨卡无比)。

一般情况下,如果碰到这样的面试题,防抖动机制,就能很好的解决,这方面最早的应用实践还是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防抖动的更多相关文章

  1. js:防抖动与节流

    http://blog.csdn.net/crystal6918/article/details/62236730

  2. js:防抖动与节流【转载】

    源文:https://blog.csdn.net/crystal6918/article/details/62236730#reply <!DOCTYPE html> <html l ...

  3. js点击事件代理时切换图片如何防抖动

    由于图片的加载速度比较慢,我们可以直接用64base对图片进行编码,把编码加在图片的url中~~~这样加载会快一些,也不会有切换图片时出现的抖动效果

  4. 关于js节流函数throttle和防抖动debounce

    废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...

  5. js动画性能提升笔记

    JavaScript动画的性能并不亚于CSS动画.因此,如果使用了现代的动画库,例如Velocity,那么动画引擎的性能将不再是app的瓶颈,构成瓶颈的只有代码. 网络性能相关 动画是浏览器运行中资源 ...

  6. html加载js那些事

    浏览器通过内置的JavaScript引擎,读取网页中的代码,对其处理后运行. JavaScript代码嵌入网页的方法 在网页中嵌入JavaScript代码有多种方法. 直接添加代码块 通过script ...

  7. 图片懒加载 echo.js

    (function (root, factory) { if (typeof define === 'function' && define.amd) { define(functio ...

  8. debounce(防抖动函数)

    短时间内不重复触发一个事件 设置一个门槛值,表示两次 Ajax 通信的最小间隔时间.如果在间隔时间内,发生新的keydown事件,则不触发 Ajax 通信,并且重新开始计时.如果过了指定时间,没有发生 ...

  9. 延迟加载图片控件--echo.js

    echo.js的github地址:https://github.com/toddmotto/echo   echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...

随机推荐

  1. VS2010-MFC(MFC常用类:定时器Timer)

    转自:http://www.jizhuomi.com/software/232.html 前面一节讲了CTime类和CTimeSpan类的使用,本节继续讲与时间有关的定时器.定时器并不是一个类,主要考 ...

  2. 夏令营501-511NOIP训练18——高三楼

    传送门:QAQQAQ 题意:定义矩阵A与矩阵B重复,当且仅当A可以通过任意次行列交换得到B,例如下图A,B即为合法矩阵 现求对于$n*n$的矩阵有多少个不重复的矩阵 数据范围: 对于10%的数据 N≤ ...

  3. 新增加的html里的标签元素,该元素作为事件,js获取不到id的问题

    if(flag==0){                var p = document.createElement("p");                  var text ...

  4. 1.2_springboot2.x中redis缓存&原理介绍

    1.整合redis作为缓存 说明这里springboot版本2.19 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构 ...

  5. 1.2python基础_数字类型_数字(Number)类型

    一.整型(int型.整数) 整型 等价于C中的有符号长整型(long) 与系统的最大整型一致(如32位机器上的整型是32位,64位机器上的整型是64位), 可以表示的整数范围在[-sys.maxint ...

  6. 初识OpenCV-Python - 005: 识别视频中的蓝色

    此次主要学习了如何将BGR转成HSV,主要用到cv2.cvtColor()和cv2.inRange()函数来识别视频中的蓝色物体. code: import cv2import numpy as np ...

  7. <Django> 高级(其他知识点)

    1. 管理静态文件 什么是静态文件? 项目中的CSS.图片.js都是静态文件 配置静态文件(settings.py) # Static files (CSS, JavaScript, Images) ...

  8. 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<& ...

  9. selenium基础(多表单切换、多窗口切换)

    一.多表单的切换 frame:HTML页面中的一中框架,主要作用是在当前页面中指定区域显示另一页面元素:              (HTML语言中,frame/iframe标签为表单框架) 在web ...

  10. RunLoop运行循环机制

    http://www.jianshu.com/p/0be6be50e461 基本概念 进程 进程是指在系统中正在运行的一个应用程序,而且每个进程之间是独立的,它们都运行在其专用且受保护的内存空间内,比 ...