函数节流 函数节流

// 函数节流 var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判断是否已空闲,如果在执行中,则直接return return; } canRun = false; setTimeout(function(){ console.log("函数节流"); canRun = true; }, 300); };

// 函数防抖 var timer = false; document.getElementById("debounce").onscroll = function(){ clearTimeout(timer); // 清除未执行的代码,重置回初始化状态 timer = setTimeout(function(){ console.log("函数防抖"); }, 300); };

原文地址:https://www.cnblogs.com/dianzan/p/8994945.html

时间: 2024-10-16 11:49:35

函数节流 函数节流的相关文章

js节流函数高级版

节流函数其主要作用就是防止用户在短时间内多次触发该事件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 思路: 鼠标抬起,间隔0.5秒请求小区数据,通过上下箭头选择小区,输入框文字变化,按下enter或者搜索按钮时,

Javascript性能优化之节流函数

在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了 window.addEventListener('scroll',function(){ // 判断滚动条有没有到底部 },false) 看似上面这段代码没有什么问题,然后我们给这段代码再加一段代码看一下 window.addEventListener('scroll',function(){ // 判断滚动条有没有到底部 conso

underscore.js中的节流函数debounce及trottle

函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeout函数 clearTimeout(cancelTimer); cancelTimer =setTimeout(function(){ switchControl.switchAciontFactory(view, conf); },300) 代码的意思就不做多说了,实际上我无意间实现了一个debou

学习笔记 -- js节流函数

/* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间,单位毫秒 * @param immediate {bool} 给 immediate参数传递false 绑定的函数先执行,而不是delay后后执行. * @return {function}实际调用函数 */ commFun.throttle = function (fn,delay, immedi

js节流函数中的参数传递

以下内容,都是本人自己思考所得,不免存在很多问题,欢迎大家指正或者提供更好的解决方法. 在开发中,遇到这样一个问题:拍摄地点列表,用户如果在短时间内多次点击同一个地点时,将会添加多个同名地点. 很显然,这不是我们想要的结果.然后就上网搜了一下,知道了一个新的概念,函数节流(在这里,这个理解是错误的,应该是函数去抖,这个后面再说).在这里主要参照了博客园谦行的这篇文章:Javascript函数节流 这边文章主要讲述了无参数函数的节流,并提供了两种实现方式.而我在这里想要说的是这实际开发中,我遇到的

节流函数&amp;防抖函数 柯里化函数

/* onscroll onresize input ..... 节流函数 让高频率事件进行减少触发变成低频率事件 var bStop = true; window.onscroll = function() { if(!bStop){ return; } bStop = false; setTimeout(()=>{ var t = document.documentElement.scrollTop || document.body.scrollTop; console.log(t); bS

简单的节流函数throttle

在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制函数被频繁调用的解决方案: let throttle = function(fn,interval){ let __self = fn,timer,firstTime = true; return function(){ var args = arguments,__me = this; if(fi

函数防抖与节流

1.为什么会有函数的防抖与节流及使用场景 在进行窗口的resize.scroll,输入框内容校验或者向后端发起ajax等操作时, 如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕. 此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果. 2.函数防抖与函数节流的概念及实现原理 函数防抖(debounce): 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了

防抖和节流函数最简版

防抖和节流函数最简版 防抖: 多次触发事件只执行一次(适用于断续的事件, 比如 click.input) 1 function debounce(fn, time) { 2 let timeout 3 return () => { 4 if (timeout) { 5 clearTimeout(timeout) 6 } 7 timeout = setTimeout({ 8 fn 9 }, time) 10 } 11 } 节流: 在指定时间内多次触发事件只执行一次(适用于连续的事件, 比如 scr

前端进击的巨人(八):浅谈函数防抖与节流

本篇课题,或许早已是烂大街的解读文章.不过春招系列面试下来,不少伙伴们还是似懂非懂地栽倒在(-面试官-)深意的笑容之下,权当温故知新. JavaScript的执行过程,是基于栈来进行的.复杂的程序代码被封装到函数中,程序执行时,函数不断被推入执行栈中.所以 "执行栈" 也称 "函数执行栈". 函数中封装的代码块,一般都有相对复杂的逻辑处理(计算/判断),例如函数中可能会涉及到 DOM 的渲染更新,复杂的计算与验证, Ajax 数据请求等等. 前端页面的操作权,大部分