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

源文：https://blog.csdn.net/crystal6918/article/details/62236730#reply

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="container" style="height: 300px;background: red;overflow: auto"><div style="height: 3000px;background: yellow;"></div></div>
</body>
<script>//初级防抖/* // 将会包装事件的 debounce 函数function debounce(fn, delay) {// 维护一个 timerlet timer = null;return function () {// 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量let context = this;            let args = arguments;clearTimeout(timer);timer = setTimeout(function () {fn.apply(context, args);}, delay);}}// 当用户滚动时被调用的函数function foo() {console.log('You are scrolling!');}// 在 debounce 中包装我们的函数，过 2 秒触发一次let elem = document.getElementById('container');elem.addEventListener('scroll', debounce(foo, 500)); *///更高级防抖/*  function debounce(func, delay, immediate) {var timer = null;return function () {var context = this;var args = arguments;if (timer) clearTimeout(timer);if (immediate) {//根据距离上次触发操作的时间是否到达delay来决定是否要现在执行函数var doNow = !timer;//每一次都重新设置timer，就是要保证每一次执行的至少delay秒后才可以执行timer = setTimeout(function () {timer = null;}, delay);//立即执行if (doNow) {func.apply(context, args);}} else {timer = setTimeout(function () {func.apply(context, args);}, delay);}}}function foo() {console.log('You are scrolling!');}let elem = document.getElementById('container');elem.addEventListener('scroll', debounce(foo, 500, true)); */
</script>
<script>//节流1.时间戳版/*  var throttle = function(func,delay){var prev = Date.now();return function(){var context = this;var args = arguments;var now = Date.now();if(now-prev>=delay){//func()func.apply(context,args);prev = Date.now();}}} *///节流2.定时器版/* var throttle = function (func, delay) {var timer = null;return function () {var context = this;var args = arguments;if (!timer) {timer = setTimeout(function () {func.apply(context, args);timer = null;}, delay);}}} *///节流3.综合使用时间戳与定时器var throttle = function (func, delay) {var timer = null;var startTime = Date.now();return function () {var curTime = Date.now();var remaining = delay - (curTime - startTime);var context = this;var args = arguments;clearTimeout(timer);if (remaining <= 0) {func.apply(context, args);startTime = Date.now();} else {timer = setTimeout(func, remaining);}}}function foo() {console.log('arguments');}let elem = document.getElementById('container');elem.addEventListener('scroll', throttle(foo, 500, true));
</script></html>

转载于:https://www.cnblogs.com/webSong/p/8991986.html

js:防抖动与节流【转载】相关推荐

underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
面试必问题：JS防抖与节流
摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...
2019 面试准备 - JS 防抖与节流 (超级重要!!!!!)
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址本文涉及知识点: 防抖与节流重绘与回流浏览器解析 URL DNS 域名解析 ...
利用JS调用aspx页面(转载)
在实际开发中如新闻系统就需要利用js来调用某分类的新闻等. 非Codebehind版 Showjs.aspx ---------------------------- <%Response.Wr ...
Backbone.js源码解读(转载)
前言: 个人也翻译过一遍,可是基础知识不够,所以理解的没有很清楚//Backbone.js 0.9.2//(c) 2010-2012 Jeremy Ashkenas, DocumentCloud In ...
ie6 javascript js 缺少标识符总结(转载)
转载http://blog.csdn.net/qingyundys/article/details/6218280 ie6 javascript js 缺少标识符总结 1. ie6下,javascri ...
js动态添加options(转载)
JS动态添加Option的几种方式在处理表单的时候,经常会有这样的需求:给定一定的数据来生成某个select的option,或者更进一步,某些option或许预先选中或者有高亮显示. 下面我们就来温 ...
JS操作保存cookie(转载他人)
2019独角兽企业重金招聘Python工程师标准>>> 网上借鉴了一些朋友的经验,做了一个小例子,js操作cookie,实现登录密码保存.cookie的存放方式是以键值对的方式保存的 ...
JS作用域链（转载）
这几天看犀牛书的一点心得和总结,做个笔记吧,主要是概念层面的,JS高手大可忽略. 变量的作用域变量的作用域其实很简单:在函数内定义的局部变量只在本函数内有效,在所有函数体外定义的变量在JS代码的全局 ...
发条js调试工具_【转载】移动端js调试工具：eruda
通常写前端页面都在Chrome浏览器的开发模式下进行调试,但是写放在移动端的H5页面时,有时候会遇到在Chrome上调试没有问题,但是在手机的浏览器上有问题的情况:也有的页面是需要放在微信公众号中的, ...

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

js:防抖动与节流【转载】相关推荐

最新文章

热门文章