仅在我选择范围后执行范围滑块观察器内的代码而不是在我滑动滑块时不执行？

Question

我创建了一个函数，它监视范围属性的变化并执行新的GET请求，以便在新范围内获得所有景点。不幸的是，我不断从API获得Too many requests错误。我假设这是因为函数在每个range属性变化上按字面执行，这在我滑动滑块时经常会发生。

这就是为什么我想知道在完成滑动范围滑块的滑动条后，我只能执行一次该功能的原因是什么？

HTML

<input v-model="range" class='range-input' type="range" min="1000" max="25000" value="10000">

JS

data(){
    return {
        sights: [],
        username: this.$route.params.username,
        city: this.$route.params.city,
        lat: this.$route.params.lat,
        lng: this.$route.params.lng,
        type: 'museum',
        range: 5000,
    }
},
watch: {
    range: function(){
        axios.get('/getSights/' + this.lat + '/' + this.lng + '/' + this.type + '/' + this.range)
        .then(response => {
            this.sights = response.data.result.results
            this.nextPageToken = response.data.result.next_page_token
            console.log(response)
        }).catch((error) => console.log(error));
    }
}

Answer 1

收听change事件以实际执行请求。

<input @change="doRequest" v-model="range" class='range-input' type="range" min="1000" max="25000" value="10000">