牟骏荣博客    首页   linux学习    安卓    Python    NODEJS    前端    数据库      vue 中使用防抖和节流，防止重复点击或重复上拉加载 Posted on  2019-10-10 |  In 前端 /*** 函数防抖 (只执行最后一次点击)* @param fn* @param delay* @returns {Function}* @constructor*/export const Debounce = (fn, t) => {let delay = t || 800;let timer;// console.log(fn)// console.log(typeof fn)return function () {let args = arguments;if(timer){clearTimeout(timer);}timer = setTimeout(() => {timer = null;fn.apply(this, args);}, delay);}};/*** 函数节流* @param fn* @param interval* @returns {Function}* @constructor*/export const Throttle = (fn, t) => {let last;let timer;let interval = t || 800;return function () {let args = arguments;let now = +new Date();if (last && now - last < interval) {clearTimeout(timer);timer = setTimeout(() => {last = now;fn.apply(this, args);}, interval);} else {last = now;fn.apply(this, args);}}};使用方法...methods:{getAliyunData:Throttle(function(){...},1000),}..    iview Form 组件阻止回车冒泡（刷新页面）提交表单 Posted on  2019-09-29 |  In 前端 问题描述当 form 中只有一个 input 时回车会自动提交表单，这是浏览器的默认行为。解决办法第一种是在 Input 上加 @keydown.native.enter.prevent ="handleEnter"第二种是在 Form 上加 @submit.native.prevent     Promise使用详解2（ES6中的Promise） Posted on  2019-09-06 |  In 前端 then()方法简单来讲，then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。（1）下面通过样例作为演示，我们定义做饭、吃饭、洗碗（cook、eat、wash）这三个方法，它们是层层依赖的关系，下一步的的操作需要使用上一部操作的结果。（这里使用 setTimeout 模拟异步操作）//做饭function cook(){console.log('开始做饭。');var p = new Promise(function(resolve, reject){        //做一些异步操作setTimeout(function(){console.log('做饭完毕！');resolve('鸡蛋炒饭');}, 1000);});return p;}//吃饭function eat(data){console.log('开始吃饭：' + data);var p = new Promise(function(resolve, reject){        //做一些异步操作setTimeout(function(){console.log('吃饭完毕!');resolve('一块碗和一双筷子');}, 2000);});return p;}function wash(data){console.log('开始洗碗：' + data);var p = new Promise(function(resolve, reject){        //做一些异步操作setTimeout(function(){console.log('洗碗完毕!');resolve('干净的碗筷');}, 2000);});return p;}（2）使用 then 链式调用这三个方法：cook().then(function(data){return eat(data);}).then(function(data){return wash(data);}).then(function(data){console.log(data);});当然上面代码还可以简化成如下：cook().then(eat).then(wash).then(function(data){console.log(data);});（3）运行结果如下：2，reject()方法上面样例我们通过 resolve 方法把 Promise 的状态置为完成态（Resolved），这时 then 方法就能捕捉到变化，并执行“成功”情况的回调。而 reject 方法就是把 Promise 的状态置为已失败（Rejected），这时 then 方法执行“失败”情况的回调（then 方法的第二参数）（1）下面同样使用一个样例做演示//做饭function cook(){console.log('开始做饭。');var p = new Promise(function(resolve, reject){        //做一些异步操作setTimeout(function(){console.log('做饭失败！');reject('烧焦的米饭');}, 1000);});return p;}//吃饭function eat(data){console.log('开始吃饭：' + data);var p = new Promise(function(resolve, reject){        //做一些异步操作setTimeout(function(){console.log('吃饭完毕!');resolve('一块碗和一双筷子');}, 2000);});return p;}cook().then(eat, function(data){cons