js函数片段

[better2021]

jq点击空白处关闭弹框

    $(document).click(function (e) {
        e.stopPropagation()
        var _list = $(".mask")
        if (!_list.is(e.target) && _list.has(e.target).length === 0) {
            // 关闭弹窗
                        $("#tanchuang").hide() 
        }
    })

// js 点击空白处跳url
document.body.addEventListener("click", function (e) {
  e.stopPropagation();
  var _list = document.querySelector(".logos");
  if (!_list.contains(e.target)) {
    // 关闭弹窗
    window.open(jumpUrl);
  }
});

[better2021]

/**
 *  所以函数返回值是数字的相加
 */

var obj = {
    a: function () {
        return "1a"
    },
    b: function () {
        return 6
    },
    c: function () {
        return "5"
    },
    d: function () {
        return "asd"
    },
}

/**
 * 第一种方法
 */

Object.keys(obj)
    .map((o) => obj[o]())
    .filter((v) => !isNaN(v))
    .reduce((pre, next) => Number(pre) + Number(next))

/**
 * 第二种方法
 */

let arr = []
Object.keys(obj).forEach((element) => {
    if (!isNaN(obj[element]())) {
        arr.push(Number(obj[element]()))
    }
})

arr.reduce((pre, next) => pre + next)

[better2021]

样式

body {
  -webkit-font-smoothing: antialiased; // 平滑像素级别的字体
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none; // 让用户不可选中
}

视频自动播放，但手机端支持sarifa浏览器

<video id="videoBg" webkit-playsinline="true" playsinline loop muted autoplay>
          <source src="./images/videoBg.mp4" type="video/mp4">
        </video>

[better2021]

js的正则匹配样式id选择器

var regex = /id="[^"]*"/
var  string  = '<div id="container" class="main"></div>'
console.log(string.match(regex)[0])   // id=“container”

[better2021]

节流防抖函数

函数节流与函数防抖都是为了限制函数的执行频次，是一种性能优化的方案，比如应用于window对象的resize、scroll事件，拖拽时的mousemove事件，文字输入、自动完成的keyup事件。

节流：连续触发事件但是在 n 秒中只执行一次函数例:（连续不断动都需要调用时用，设一时间间隔），像dom的拖拽，如果用消抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多。

防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。例:（连续不断触发时不调用，触发完后过一段时间调用），像仿百度搜索，就应该用防抖，当我连续不断输入时，不会发送请求；当我一段时间内不输入了，才会发送一次请求；如果小于这段时间继续输入的话，时间会重新计算，也不会发送请求。

// 函数防抖

function debounce(fn, delay) {
     if(typeof fn!=='function') {
        throw new TypeError('fn不是函数')
     }
     let timer; // 维护一个 timer
     return function () {
         var _this = this; // 取debounce执行作用域的this(原函数挂载到的对象)
         var args = arguments;
         if (timer) {
            clearTimeout(timer);
         }
         timer = setTimeout(function () {
            fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
         }, delay);
     };
}

// 调用​
input1.addEventListener('keyup', debounce(() => {
 console.log(input1.value)
}), 600)

// 函数节流

function throttle(fn, delay) {
  let timer;
  return function () {
    var _this = this;
    var args = arguments;
    if (timer) {
      return;
    }
    timer = setTimeout(function () {
      fn.apply(_this, args); // 这里args接收的是外边返回的函数的参数，不能用arguments
      // fn.apply(_this, arguments); 需要注意：Chrome 14 以及 Internet Explorer 9 仍然不接受类数组对象。如果传入类数组对象，它们会抛出异常。
      timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
    }, delay)
  }
}

div1.addEventListener('drag', throttle((e) => {
  console.log(e.offsetX, e.offsetY)
}, 100))