What is the process for sending a request two seconds after a keyup event in AngularJS?

Is there a way to implement a delay in sending a server request after the user stops typing in AngularJS, similar to debouncing? For example, if the user types "abc" and then stops for two seconds, the request is sent to the server.

Currently, every character typed triggers a request to the server. Here is an example code snippet:


var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {
  $scope.name = 'World';

    $scope.keyupevt = function(){
      console.log('xx')
  $http.get("data.json")
    .then(function(response) {
        console.log(response)
    });
    }
});

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <input type="text"  ng-keyup="keyupevt()" />
</body>

Answer №1

Implementing setTimeout in AngularJS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {
$scope.name = 'World';


$scope.keyupevt = function(){

  setTimeout(function(){

     $http.get("data.json").then(function(response) 
     {
       console.log(response)
     }
     )}, 2000);//setting a delay of 2 seconds

  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to determine if a jQuery AJAX response contains HTML elements?

On my webpage, I have a single form that triggers an AJAX call which can result in two different responses. One of the responses only includes a status code. In order to display any HTML contents returned by the response object on my page, I need to exami ...

Why doesn't package.json typically utilize the preset values stored in the .npmrc file?

Windows 10 x64 Based on the information found here, I created a file called C:\Users\bushm\.npmrc with the following content: author = "Andrey Bushman" However, when I run the command npm init -y in a new directory, I noticed that the pac ...

What steps can I take to stop jQuery's $.getJSON function from converting my AJAX response keys into integers?

I am facing an issue where JQuery is changing the type of keys in a JSON response object from text to integer when populating a select box. This causes the response object to be reordered based on the numeric indexes, disrupting the order of the select box ...

Steps to have the initial link redirect to a designated webpage

I am working with tables that have links defined in the HTML. I want to modify the behavior so that the first link opens a different URL, for example: john.com. Is it possible to achieve this? Specifically, I want the link associated with the first name ( ...

The button on an AJAX submission page is unresponsive when attempting to click it

I am currently working on a commenting project where I have a button with the id #see_more_comments inside the .user__comments__container div. This content is being generated from a getcomments-afunc.php file using jQuery post when the comment count exceed ...

Manipulate the elements within an array, make changes, and then insert

In the array called newData, I am trying to add one more element with Rank 1. However, the issue is that the Rank value is getting updated for both records. The desired behavior is to have Rank set to 1 for the second record and have the first record' ...

What should be done for node to disregard a JSON file with the identical name as a package?

Given the folder structure below: mypackage/ index.js package.json mypackage.json When I attempt to execute node mypackage, node terminates without executing the program due to the presence of mypackage.json. However, renaming it to mypackage.json ...

I encountered an error while trying to add a document to Firestore using the 'add' method in Vue.js. Can someone provide guidance on how to

Whenever the function is triggered (on click), I aim to include a new document. Although it functions with .set(), my goal is for a new document to be created each time the form is submitted. The current error code I am encountering is: https://i.sstatic ...

Getting the total number of child elements in a web page using Selenium web-driver with Node.js

I've been looking everywhere, but I can't seem to find the answer Here's my HTML code: <form id="search_form_homepage" > ... <div class="search__autocomplete" style="display: block;"> &l ...

Encountered a 404 error (not found) while making a GET request with axios

I encountered an issue with my pizza shop application built with Next.js. Whenever I run the app on my computer, I come across this error: https://i.sstatic.net/tsQzZ.png The error disappears after refreshing the page. Here is my index.js file: import ax ...

Problematic Situation Arising from JavaScript AJAX and NVD3.JS Unresolved Object Error

I am currently in the process of developing a script that will allow me to retrieve data for my chart from an external PHP file. Initially, I attempted manually inputting the data into the chart and it worked perfectly fine. However, when I tried using A ...

Conceal Reveal Secret Script

Can you help me with a question regarding the spoiler on this specific page? Here is the link: When I click on Windows, a table appears. However, when I click on Linux, the content of Windows disappears. I am looking to create a spoiler like this, but whe ...

A guide on converting nested arrays of objects in JavaScript

I am faced with transforming an array of Objects that contain a nested structure. Here is an example of the data: [ { geography: 'Austia', product: 'RTD Coffee', dataType: 'Off-Trade rsp (curr/con, lo ...

Debating the use of cameras in Three.js

Creating a camera in code typically looks like this: var camera = new THREE.PerspectiveCamera( FOV, ASPECT_RATIO, NEAR_PLANE, FAR_PLANE ); But what exactly do these values represent? ...

Utilizing the $(this).text method in combination with the content class

In order for the text of the click function to be the final variable, I attempted using $(this).text, but unfortunately it did not produce the desired outcome. Placing the class at the end resulted in both p lines appearing. My goal is to only display the ...

What is the best way to simulate our services for controller testing?

Currently delving into angular js and experimenting with testing a controller. Here is the service I am using: angular.module('test'){ service.getAllServices = function() { var fullPath = url var deferre ...

Tips for verifying the functionality of your AngularJS controller and troubleshooting any potential issues

Testing my controller functionality has been a challenge. I attempted to use an alert function to check if the controller is working properly, but unfortunately, nothing seemed to happen. JS routerApp.controller('myCtrl', ["$scope", "$http", " ...

Issue with normalizing UV coordinates to a range of 0 and 1 in threejs

I am facing an issue where my model has UV coordinates that are outside the range of 0 and 1. I have attempted to normalize these coordinates with a function, but the results are not as expected. This is the function I am using to convert the UV coordinate ...

What is the importance of accessing the session object prior to the saving and setting of a cookie by Express-Session?

Quick Summary: Why is it crucial to access the session object? app.use((req, res, next) => { req.session.init = "init"; next(); }); ...in the app.js file after implementing the session middleware for it to properly function? Neglecti ...

The essential HTML structure of Polymer 1.0 Main Document

As I delve into the world of Polymer, I am truly fascinated by how well web components work together. Now, my next step is to construct a web application. The burning question on my mind is: Should I implement a main element (let's say "app-element") ...