资讯专栏INFORMATION COLUMN

test

glumes / 794人阅读

摘要:防抖多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。

防抖:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。
    function debounce(fn) {
      // 4、创建一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {除
        clearTimeout(timeout);
        var args = arguments;
        timeout = setTimeout(() => {
          fn.apply(this, args);
        }, 1000);
      };
    }
    sayDebounce(){
     console.log("防抖成功!");
    }
    btn.addEventListener("click", debounce(sayDebounce));
节流: 触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用
    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.apply(context, args);
                prev = Date.now();
            }
        }
    }
    function handle() {
        console.log(Math.random());
    }
    window.addEventListener("scroll", throttle(handle, 1000));
    // 处理函数
    function handle() {
        console.log(Math.random()); 
    }
    // 滚动事件
    window.addEventListener("scroll", debounce(handle, 1000));
js 实现once 方法
function runOnce(fn, context) { //控制让函数只触发一次
  return function () {
    try {
      fn.apply(context || this, arguments);
    }
    catch (e) {
      console.error(e);//一般可以注释掉这行
    }
    finally {
      fn = null;
    }
  }
}
var obj = {name: "狗子", age: 24};
var canOnlyFireOnce = runOnce(function () {
  console.log("你好" + this.name);
}, obj);
canOnlyFireOnce(); //你好天涯孤雁
canOnlyFireOnce(); // nothing
实现bind 或者 call
Function.prototype.bind= function(obj){
    var _self = this, args = arguments;
    return function() {
        _self.apply(obj, Array.prototype.slice.call(args, 1));
    }
}
Function.protype.call = function(context){
    context = context || window
    context.fn = this;
    const args = [...arguments].slice(1);
    const result = context.fn(...args);
    delete context.fn
    return result;
}
reduce实现map
    const reduceMap = (fn, thisArg /*真想去掉thisArg这个参数*/ ) => {
        return (list) => {
            // 不怎么愿意写下面这两个判断条件
            if (typeof fn !== "function") {
                throw new TypeError(fn + "is not a function")  
            }
            if (!Array.isArray(list)) {
                throw new TypeError("list must be a Array")
            }
            if (list.length === 0) return []
            return list.reduce((acc, value, index) => {
                return acc.concat([ fn.call(thisArg, value, index, list) ])
            }, [])
        }
    }
    // 来使用下怎么样           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109439.html

相关文章

  • K8S client-go Patch example

    摘要:所以使用记住要把原始的数据取出来和你要新增的数据合并后再提交,如单元测试如各位还有其他更好的方式,欢迎交流补充。 使用Patch方式更新K8S的 API Objects 一共有三种方式:strategic merge patch, json-patch,json merge patch。关于这三种方式的文字描述区别可看官方文档update-api-object-kubectl-patc...

    null1145 评论0 收藏0
  • "undefined reference to" 问题汇总及解决方法

    摘要:在实际编译代码的过程中,我们经常会遇到的问题,简单的可以轻易地解决,但有些却隐藏得很深,需要花费大量的时间去排查。工作中遇到了各色各样类似的问题,按照以下几种可能出现的状况去排查,可有利于理清头绪,从而迅速解决问题。 在实际编译代码的过程中,我们经常会遇到undefined reference to的问题,简单的可以轻易地解决,但有些却隐藏得很深,需要花费大量的时间去排查。工作中遇到了...

    Michael_Lin 评论0 收藏0
  • script关于async与defer属性的测试

    摘要:环境其它版本没有测试,下列简称和分别延迟秒秒和立即,并会在控制台里打印和测试代码做测试步骤不为设定或时页面会在所有加载和执行完后渲染输出和设置为会等的秒延迟后,控制台会立即输出和等的秒后会输出并触发,最后触发会等的秒延迟后,控制台会立即 环境: chrome31/firefox25/IE11(其它版本没有测试),下列简称chrome/firefox/IE http://127.0....

    scola666 评论0 收藏0
  • Python 自定义函数的特殊属性(收藏专用)

    Python 中通过函数定义所创建的用户自定义函数对象均具有一些特殊属性,需要注意的是这里介绍的是自定义函数(function类型)的特殊属性,而非方法(method 类型)的特殊属性,函数和方法的特熟属性以及默认的返回值可能不尽相同。 对于大多数特殊属性,可以通过下面这个例子示范一下: class Test(): def func(self, v = dog): 这里演...

    zhou_you 评论0 收藏0
  • JS 变量声明之变量提升和函数提升

    摘要:很多初学者弄不清变量提升和函数提升,整理写几个例子,分析一下,你很快搞明白怎么分析。精华放在最上面,两个最基本的原则函数声明优先先声明,后赋值,声明和赋值是分开的。 很多初学者弄不清变量提升和函数提升,整理写几个例子,分析一下,你很快搞明白怎么分析。精华放在最上面,两个最基本的原则: 函数声明优先 先声明,后赋值,声明和赋值是分开的。 让我们看几个例子并解释下 先看这个例子: va...

    honhon 评论0 收藏0
  • Python装饰器:python真正入门的鉴定标准

    上一篇文章:Python是动态语言:动态添加或删除属性、方法下一篇文章:私有化规则与属性Property 装饰器功能: 引入日志 函数执行时间统计 执行函数前预备处理 执行函数后清理功能 权限校验 缓存 1、无参数函数的装饰器 实例: from time import ctime,sleep def time_fun(func): #内部包裹函数 def wrapped_...

    ranwu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<