zoukankan      html  css  js  c++  java
  • 防抖、节流函数

    一、防抖

      原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

      场景:

        1.按钮提交场景,防止多次提交按钮,只执行最后一次的提交

        2.搜索框联想场景,防止联想发送请求,只发送最后一次输入

      简易版:

    function debounce (func, wait) {
        let timeout
        return function () {
            const context = this
            const args = arguments
            clearTimeout(timeout)
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait)
        }
    }

      立即执行版:

        有时希望立刻执行函数,然后等到停止触发n秒后才可以重新触发执行

    function debounce (func, wait, immediate) {
        let timeout
        return function () {
            const context = this
            const args = arguments
            if (timeout) clearTimeout(timeout)
            if (immediate) {
                const callNow = !timeout
                timeout = setTimeout(function () {
                    timeout = null
                }, wait)
                if (callNow) func.apply(context, args)
            } else {
                timeout = setTimeout(function () {
                    func.apply(context, args)
                }, wait)
            }
        }
    }

    二、节流

      原理:规定在一个单位时间内,只能触发一次函数。如果这个函数在这个单位时间内触发多次函数,只有一次生效

      场景:

        1.拖拽:固定时间内只执行一次,防止超高频次触发位置变动

        2.缩放:监控浏览器resize

    function throttle (func, wait) {
        let timeout
        return function () {
            const context = this
            const args = arguments
            if (!timeout) {
                timeout = setTimeout(function () {
                    timeout = null
                    func.apply(context, args)
                }, wait)
            }
        }
    }
  • 相关阅读:
    VS.NET2005中的源代码管理
    IE6升级后需要激活ActiveX控件的解决办法
    SQL Server的数据库开发工具
    今天更新了ActiveSync4.2
    永远等你先挂电话
    这回软设考试通过了!
    在Windows2003中FSO组件不能使用的问题
    七天的假期好长哟!
    发现博客园的一个Bug 存为草稿后就找不到了
    MySQL服务不能启动的解决方法
  • 原文地址:https://www.cnblogs.com/yaxinwang/p/13841533.html
Copyright © 2011-2022 走看看