事件的防抖和节流、跨域相关

保持内心的好奇和平静。

---

我们总是会遇到事件的频繁触发所导致的请求重复发送及动画掉帧的问题，这些问题有着统一的解决方案，这次做一个总结。

节流

定时器函数通常会遇到的情况是在设置的延迟时间之内回调请求还未执行完毕，或者在鼠标滑动事件中事件的频繁触发，事件节流是为了解决这一个问题所总结出的思想模式，即在一定的延迟时间内事件只执行一次

/**
*  通过使用闭包，判断上一次与当前时间的间隔是否大于设置的时间间隔，如果大于
*  则再次执行回调，否则不执行
*/
function debunce(fn, delay) {
  var lastT = Date.now();
  return function() {
    var nowT = Date.now();
    if(nowT - lastT > delay) {
      // 绑定this
      fn.call(this);
      lastT = nowT;
    }
  }
}

document.scroll = debunce(function() {
    console.log('触发了', Date.now());
  }, 200);

节流.png

---

防抖

防抖多数用来做防止重复提交的问题，比方说按钮频繁点击从而导致的请求重发提交

/***
* 使用闭包函数，如果定时器存在则不执行事件，如果定时器不存在则执行事件
*/

function bunce(fn, delay) {
  var timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.call(this);
    }, delay);
  }
}

document.getElementById('btn').onclick = bunce(function () {
  console.log('是否频繁触发？');
}, 1200);

防抖.gif

效果就是只有最后一次触发后的1200ms后事件才会触发执行

---

跨域

跨域是浏览器的同源策略导致的，浏览器为了数据安全考虑 规定：
只有协议名，域名，端口号完全一致的才可以互相访问数据

解决跨域有很多方法：

• jsonp
• corse
• 设置代理

其中jsonp利用了script天然的没有跨域限制来实现
corse需要后台设置
设置代理可以后台配置也可以前台配置，现在用webpack来设置代理特别简单

/**
* jsonp 的实现思路 前后端都需要配置
*/
// 定义回调函数
function getInfo(data) {
  // data 一般为后端返回数据 做对应处理就可以了
}
// 前端工作 与后端统一回调名称 callback 这里用了callback
var script = document.createElment('script');
script.src = 'localhost:8080?callback=getInfo'; // 响应地址
// 插入script标签执行
document.appendChild(script);