函数节流 throttle

/*
 * throttle
 */

var throttle = function (fn, interval) {
  var __self = fn // 保存需要被延迟执行的函数引用
  var timer // 定时器
  var firstTime = true // 是否是第一次调用

  return function () {
    var args = arguments
    var __me = this

    if (firstTime) { // 如果是第一次调用,不需延迟执行
      __self.apply(__me, args)
      return firstTime = false

    }

    if (timer) { // 如果定时器还在,说明前一次延迟执行还没有完成
      return false
    }

    timer = setTimeout(function () { // 延迟一段时间执行
      clearTimeout(timer)
      timer = null
      __self.apply(__me, args)
    }, interval || 500)
  }
}

window.onresize = throttle(function () {
  console.log(1)
}, 500)

  

原文地址:https://www.cnblogs.com/lan-cheng/p/12146677.html

时间: 2024-11-08 12:06:05

函数节流 throttle的相关文章

js的函数节流(throttle)

什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序.而大家知道,DOM操作时很消耗性能的,这个时候,如果你为这些事件绑定一些操作DOM节点的操作的话,那就会引发大量的计算,在用户看来,页面可能就一时间没有响应,这个页面一下子变卡了变慢了.甚至在IE下,如果你绑定的resize事件进行

[概念] js的函数节流和throttle和debounce详解

js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做"函数节流",下面就通过代码实例对此做一下介绍.一.函数节流是什么:在实际编码中,mousemove和resize是使用非常频繁的事件类型(当然还有其他类似事件类型),这样的事件有一个共同的特点,就是在一个普通的操作中,就有可能会在极短的时间内多次执行事件处理函数,会极大的损耗性能,比如resi

浅谈javascript的函数节流

什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序.而大家知道,DOM操作时很消耗性能的,这个时候,如果你为这些事件绑定一些操作DOM节点的操作的话,那就会引发大量的计算,在用户看来,页面可能就一时间没有响应,这个页面一下子变卡了变慢了.甚至在IE下,如果你绑定的resize事件进行

JS函数节流和函数防抖问题分析

问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? 问题2:如果给一个按钮绑定了表单提交的post事件,但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交,如何防止多次提交的发生? 为了应对如上场景,便出现了 函数防抖 和 函数节流 两个概念,总的来说:这两个方法是在时间轴上控制函数的执行次数. 1.函数防抖(debounce) 概念: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发

函数防抖VS函数节流

(1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: 触发了一个事件后:如果有一个定时任务待执行,就清除定时器,重新计时. 如果没有任务待执行,就定时执行这个事件. #应用场景: 表单的连续点击,防止重复提交.比如重复发送一篇文章. 类百度的搜索,连续输入等输入停止后再搜索. 一直拖动浏览器窗口,只想触发一次事件等. (2)函数节流throttle 规

微信小程序:防止多次点击跳转(函数节流)

场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数. /utils/util.js: function throttle(fn, gapTime) { if (gapTime == null ||

函数节流(throttle)

函数节流的目的,是为了防止在不间断的时间里,重复执行某个函数. 比如浏览器的onresize事件,如果我们在这个函数中操作了DOM元素,那么对CPU的开销是非常大的. 所以为了防止这种情况的出现,函数节流起到了很好的作用. 1 /** 2 * 函数节流方法 3 * @param delay 延迟delay毫秒后,执行fn函数 4 * @param fn 需要执行的函数 5 * @param context 上下文 6 */ 7 var throttle = function (delay, fn

js 函数节流 jQuery throttle/debounce

在<JavaScript高级程序设计>一书有介绍函数节流,里面封装了这样一个函数节流函数: function throttle(method, context) { clearTimeout(methor.tId); method.tId = setTimeout(function(){ method.call(context); }, 100); } 它把定时器ID存为函数的一个属性.而调用的时候就直接写 window.onresize = function(){ throttle(myFu

js 函数的防抖(debounce)与节流(throttle)

原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频繁触发事件,咋办呢?这时候就应该用到函数防抖和函数节流了! 准备材料: <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-col