通过实例讲解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))
显然这是一个弱爆了的处理,那有没有更好的方式呢?有,比如节流。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
jquery.messager.js插件导致页面抖动的解决方法
消息弹出时页面总是抖动或者闪一下,找了很长时间没有找到原因,今天找到,原来是html没有声明解析规范 需要加上<!DOCTYPE> 标签 复制代码 代码如下: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
本文实例是对JavaScript运动框架(一)的应用 scrollTop:有时候网页很长,其高度大于显示器高度,会产生滚动,那么在高度方向上,"滚走"的部分就是scrollTop var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; offsetTop:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离.所谓的定
-
JavaScript实现窗口抖动效果
原理介绍 抖动其实是往复运动的一种特殊形式,只不过往复运动是一种无摩擦力的无限运动,且以速度为参照依据:而抖动以位置作为参照依据,最终停在起始点 在网页中最常见的一种抖动效果应该是窗口抖动提示了 抖动元素从起始点开始,先向右移动最大距离len,然后移动到对称的左边位置:然后再向右移动稍微小一点的距离,再移动到对称的左边位置:以此循环,最终元素停止在起始点 代码实现 抖动在代码实现上,无非就是通过定时器,每隔一段时间让left或top值进行变化 在运动实现中,有两种距离变化的思路 思路一 div.
-
js 窗口抖动示例
复制代码 代码如下: <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content="
-
javascript抖动元素的小例子
复制代码 代码如下: <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>xxxxxx</title> <style> #control { height: 100px; width: 100%; background: gr
-
通过实例讲解JS如何防抖动
前言 这道题目经常与事件触发器同时存在,为了考察面试者在一些具体业务流程上(信息流,搜索框输入查询)等,能否综合的考虑实现思路. 题目 在某些信息列表中一般采用瀑布流,滚动一屏时加载相应的数据,请思考如何避免连续下拉时而产生的问题(可能是页面崩溃,也可能是巨卡无比). 一般情况下,如果碰到这样的面试题,防抖动机制,就能很好的解决,这方面最早的应用实践还是Twitter,开发者写了一篇博客,详细的阐述了如何解决这样的问题.那么,说到防抖动,其核心内涵在于延迟处理,也就是将一系列的事件处理程序全部延
-
实例讲解JS中setTimeout()的用法
本文实例讲解了JS中setTimeout()的用法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"&
-
实例讲解JS中数组Array的操作方法
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ 复制代码 代码如下: var arr = new Array();arr[0] = "aaa";arr[1] = "bbb";arr[2] = "ccc";//alert(arr.length);//3arr.pop();//alert(arr.length);//2//alert(arr[arr.length-1]);//bbbarr.pop();//
-
实例讲解js验证表单项是否为空的方法
表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了. 代码如下: <html> <head> <meta charset="gb2312"> <title>js简单表单验证</title> <script type="text/javascript"
-
实例讲解JS中pop使用方法
我们首先来看一下pop方法的基本语法 array.pop(); 接着我们来看pop方法使用的具体示例 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> var scrip
-
实例讲解多个js毫秒倒计时同时进行效果
本文实例讲解js毫秒倒计时同时进行效果的代码,分享给大家供大家参考,具体内容如下 效果图: 实现功能:调用一个函数,传入html元素的id,和一个截止时间(unix时间戳),在该html元素中打印出到当前到截止时间为止的倒计时,精确到毫秒: 效果图如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" conte
-
原生js的ajax和解决跨域的jsonp(实例讲解)
最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d
-
超级简易的JS计算器实例讲解(实现加减乘除)
废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> body{ margin: 0; } .tab{ border: 3px solid black ; border-radius: 2px; border-collapse:collapse; width: 268p
-
基于vue.js路由参数的实例讲解——简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设
-
Node.js学习之TCP/IP数据通讯(实例讲解)
1.使用net模块实现基于TCP的数据通讯 提供了一个net模块,专用于实现TCP服务器与TCP客户端之间的通信 1.1创建TCP服务器 在Node.js利用net模块创建TCP服务器 var server = net.createServer([options],[connectionListener]) //options:false当TCP服务器接收到客户端发送的一个FIN包时将会回发一个FIN包 true当TCP服务器接收到客户端发送的一个FIN包时将不会回发FIN包,这使得TCP服务器
随机推荐
- java web开发中获取tomcat上properties文件内容的方法
- jQuery中将函数赋值给变量的调用方法
- js仿腾讯QQ的web登陆界面
- Java跨域问题的处理详解
- SpringBoot JPA实现增删改查、分页、排序、事务操作等功能示例
- ASP.NET中Request.Form中文乱码的解决方法
- ASP.NET中HTML页面的访问验证设置方法
- 详解ASP.NET Core 之 Identity 入门(三)
- 使用淘宝IP库获取用户ip地理位置
- 玩转图像函数库—常见图形操作
- PHP数组函数array_multisort()用法实例分析
- javascript结合Cookies实现浏览记录历史第1/3页
- sqlserver主键设计的注意点
- 利用sys.sysprocesses检查SqlServer的阻塞和死锁
- jQuery实现手机号码输入提示功能实例
- Android ViewPager的事件冲突的解决办法
- Android应用中图片浏览时实现自动切换功能的方法详解
- android开发之方形圆角listview代码分享
- C++时间戳转换成日期时间的步骤和示例代码
- PHP生成(支持多模板)二维码海报代码