/**
* 创建一个调用函数,通过this绑定和创建函数的参数调用func,调用次数不操过n次,之后再调用这个函数,
* 将返回一次最后调用func的结果
* Creates a function that invokes `func`, with the `this` binding and arguments
* of the created function, while it's called less than `n` times. Subsequent calls
* to the created function return the result of the last `func` invocation
*
* @param {number} n The number of calls at which `func` is no longer invoked
* @param {Function} func The function to restrict
* @returns {Function} Returns the new restricted function
* @example
* document.getElementById("btn").addEventListener("click", before(5, this.add))
* // this.add函数最多执行4次
*/
import toInteger from "./toInteger" // 我的博客搜索【转换为整数】
const FUNC_ERROR_TEXT = "Expected a function"
function before(n, func) {
var result
if (typeof func !== "function") {
throw new TypeError(FUNC_ERROR_TEXT)
}
n = toInteger(n)
return function() {
if (--n > 0) {
result = func.apply(this, arguments)
}
if (n <= 1) {
func = undefined
}
return result
}
}
export default before
//参考例子
import React, { Component } from "react"
import before from "./before"
class Demo extends Component {
state = {
num: 0
}
componentDidMount() {
document
.getElementById("btn")
.addEventListener("click", before(5, this.add))
}
add = () => {
this.setState(prev => ({
num: prev.num + 1
}))
}
render() {
return (
<>
<p className="code">
创建一个调用函数,通过this绑定和创建函数的参数调用func,调用次数不操过n次,之后再调用这个函数,将返回一次最后调用func的结果
</p>
<p className="code">
<button type="button" id="btn">
点击我+1
</button>
</p>
<p className="comment">{this.state.num}</p>
</>
)
}
}
export default Demo